kaffa/anvil-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to dark mode theme and remove tilted elements

Browse Source 
- Change color scheme to dark mode (navy blue background)
- Update all card, button, and form styles for dark theme
- Remove rotation transforms from all elements for cleaner look
- Adjust text colors for proper contrast on dark background

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-20 02:00:24 +09:00
parent cdfd7dce95
commit 18042eab09
1 changed files with 80 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
index.html
View File

@@ -18,16 +18,16 @@
hand: ['Caveat', 'cursive'],
},
colors: {
cream: '#fffce8',
cream: '#0f172a',
sketch: {
bg: '#fffce8',
line: '#1e1e1e',
blue: '#1971c2',
red: '#e03131',
green: '#2f9e44',
orange: '#e8590c',
purple: '#9c36b5',
yellow: '#ffc078',
bg: '#0f172a',
line: '#e2e8f0',
blue: '#3b82f6',
red: '#ef4444',
green: '#22c55e',
orange: '#f97316',
purple: '#a855f7',
yellow: '#fbbf24',
}
}
},
@@ -37,50 +37,48 @@
<style>
html { scroll-behavior: smooth; }
body {
background-color: #fffce8;
background-color: #0f172a;
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);
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: #fff;
border: 2px solid #1e1e1e;
background: #1e293b;
border: 2px solid #334155;
border-radius: 3px;
transform: rotate(-0.5deg);
box-shadow: 4px 4px 0 #1e1e1e;
}
.sketch-border:nth-child(even) {
transform: rotate(0.5deg);
box-shadow: 4px 4px 0 #0f172a;
}
/* 손그림 버튼 */
.sketch-btn {
position: relative;
border: 2px solid #1e1e1e;
border: 2px solid #475569;
border-radius: 3px;
background: #fff;
box-shadow: 3px 3px 0 #1e1e1e;
background: #1e293b;
color: #e2e8f0;
box-shadow: 3px 3px 0 #0f172a;
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;
transform: translate(-2px, -2px);
box-shadow: 5px 5px 0 #0f172a;
}
.sketch-btn:active {
transform: translate(1px, 1px) rotate(-0.5deg);
box-shadow: 2px 2px 0 #1e1e1e;
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 #0f172a;
}
.sketch-btn-primary {
background: #1971c2;
background: #3b82f6;
border-color: #2563eb;
color: white;
}
.sketch-btn-orange {
background: #e8590c;
background: #f97316;
border-color: #ea580c;
color: white;
}
@@ -96,7 +94,7 @@
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: 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%;
}
@@ -111,7 +109,7 @@
left: -15px;
right: -15px;
bottom: -10px;
border: 3px solid #e03131;
border: 3px solid #ef4444;
border-radius: 50% 45% 55% 50%;
transform: rotate(-2deg);
pointer-events: none;
@@ -130,7 +128,7 @@
/* 체크마크 스타일 */
.sketch-check::before {
content: '✓';
color: #2f9e44;
color: #22c55e;
font-weight: bold;
margin-right: 8px;
font-size: 1.2em;
@@ -139,42 +137,40 @@
/* 손그림 구분선 */
.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: 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.3;
opacity: 0.5;
}
/* 스티커 노트 스타일 */
.sticky-note {
background: #ffc078;
border: 2px solid #1e1e1e;
background: #1e293b;
border: 2px solid #3b82f6;
padding: 1rem;
transform: rotate(-2deg);
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
font-family: 'Caveat', cursive;
color: #e2e8f0;
}
.sticky-note:nth-child(even) {
transform: rotate(1deg);
background: #a5d8ff;
border-color: #22c55e;
}
.sticky-note:nth-child(3n) {
transform: rotate(-1deg);
background: #b2f2bb;
border-color: #f97316;
}
/* 낙서 스타일 배지 */
.sketch-badge {
display: inline-block;
border: 2px dashed #1e1e1e;
border: 2px dashed #475569;
border-radius: 20px;
padding: 4px 12px;
font-size: 0.875rem;
transform: rotate(-1deg);
color: #94a3b8;
}
/* 손글씨 강조 */
.highlight-box {
background: linear-gradient(180deg, transparent 60%, #ffc078 60%);
background: linear-gradient(180deg, transparent 60%, rgba(59, 130, 246, 0.3) 60%);
padding: 0 4px;
}
@@ -194,10 +190,10 @@
.chat-frame-wrapper {
width: 420px;
height: 580px;
background: white;
border: 2px solid #1e1e1e;
background: #1e293b;
border: 2px solid #334155;
border-radius: 4px;
box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
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);
@@ -213,13 +209,13 @@
}
.chat-header {
background: #1971c2;
background: #3b82f6;
color: white;
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #1e1e1e;
border-bottom: 2px solid #2563eb;
font-family: 'Caveat', cursive;
font-size: 1.25rem;
}
@@ -234,15 +230,15 @@
.chat-toggle-btn {
width: 64px;
height: 64px;
background: #1971c2;
background: #3b82f6;
color: white;
border: 2px solid #1e1e1e;
border: 2px solid #2563eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 4px 4px 0 #1e1e1e;
box-shadow: 4px 4px 0 #0f172a;
transition: all 0.2s ease;
font-size: 1.5rem;
position: relative;
@@ -251,12 +247,12 @@
.chat-toggle-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #1e1e1e;
box-shadow: 6px 6px 0 #0f172a;
}
.chat-toggle-btn:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 #1e1e1e;
box-shadow: 2px 2px 0 #0f172a;
}
/* 모바일 대응 */
@@ -275,7 +271,7 @@
<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">
<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">
<!-- 손그림 스타일 모루 로고 -->
@@ -334,14 +330,14 @@
</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 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="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
@@ -434,7 +430,7 @@
<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 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">
@@ -474,7 +470,7 @@
</div>
<!-- 가격 및 CTA -->
<div class="sketch-border p-8 flex flex-col md:flex-row items-center justify-between gap-6" style="background: #fff8e6;">
<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">
@@ -526,17 +522,17 @@
<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 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: #2f9e44;">리눅스, 생각보다 쉬워요!</span>
<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" style="transform: rotate(0deg);">
<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">
@@ -587,7 +583,7 @@
원격 데스크톱 대신 <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">
<div class="bg-slate-800 border-2 border-dashed border-slate-600 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">
@@ -619,30 +615,30 @@
</div>
<!-- 자주 쓰는 명령어 -->
<div class="sketch-border p-6 md:p-8 mb-12" style="background: #f0fdf4;">
<div class="sketch-border p-6 md:p-8 mb-12" style="border-color: #22c55e;">
<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">
<div class="bg-slate-800 border-2 border-slate-600 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">
<div class="bg-slate-800 border-2 border-slate-600 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">
<div class="bg-slate-800 border-2 border-slate-600 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">
<div class="bg-slate-800 border-2 border-slate-600 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">
<div class="bg-slate-800 border-2 border-slate-600 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">
<div class="bg-slate-800 border-2 border-slate-600 rounded p-4">
<code class="text-sketch-blue font-mono">sudo 명령어</code>
<p class="text-sketch-line/70 text-sm mt-1">관리자 권한 실행</p>
</div>
@@ -651,7 +647,7 @@
<!-- CTA -->
<div class="text-center">
<div class="sticky-note inline-block mb-6" style="transform: rotate(-1deg);">
<div class="sticky-note inline-block mb-6">
<p class="text-lg">🎁 리눅스 서버 주문 시 <span class="font-bold">초기 설정 무료 지원!</span></p>
</div>
<br>
@@ -673,7 +669,7 @@
</div>
<!-- 가격표 테이블 -->
<div class="sketch-border p-6 md:p-8 mb-12" style="transform: rotate(0deg);">
<div class="sketch-border p-6 md:p-8 mb-12">
<div class="overflow-x-auto">
<table class="w-full text-center">
<thead>
@@ -696,7 +692,7 @@
<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">
<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>
@@ -725,15 +721,15 @@
</div>
<!-- DDoS 방어 옵션 -->
<div class="sketch-border p-6 md:p-8 mb-8" style="transform: rotate(0deg);">
<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-sketch-line/30 rounded p-5 text-center">
<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/5">
<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>
@@ -787,7 +783,7 @@
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"
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>
@@ -799,7 +795,7 @@
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"
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>
@@ -824,7 +820,7 @@
</a>
</div>
<div class="sketch-border p-6" style="background: #fff8e6;">
<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>
@@ -832,7 +828,7 @@
</div>
</div>
<div class="sticky-note" style="transform: rotate(1deg);">
<div class="sticky-note">
<p class="font-bold">💡 Tip!</p>
<p class="text-sm">텔레그램 봇으로 도메인 검색, 가격 확인, 등록까지 바로 가능해요!</p>
</div>
@@ -927,7 +923,7 @@
</script>
<!-- Footer -->
<footer class="border-t-2 border-dashed border-sketch-line/30 py-12">
<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 -->