From 93757a183eee05574b66cc3d10ab580b3427107a Mon Sep 17 00:00:00 2001
From: kappa <kappa@inouter.com>
Date: Tue, 20 Jan 2026 09:22:01 +0900
Subject: [PATCH] Simplify Linux section with Cockpit showcase and lightbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 index.html | 143 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 80 insertions(+), 63 deletions(-)

diff --git a/index.html b/index.html
index 5831112..a84d0d9 100644
--- a/index.html
+++ b/index.html
@@ -317,7 +317,7 @@
         <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>
+        글로벌 서버, DDoS 방어, 도메인까지~<br>
         원스톱으로 제공하는 프리미엄 호스팅 서비스!
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
@@ -408,7 +408,7 @@
         <!-- Overseas Server -->
         <div class="sketch-border p-6">
           <div class="text-4xl mb-4">🌍</div>
-          <h3 class="text-xl font-bold mb-2">해외 서버</h3>
+          <h3 class="text-xl font-bold mb-2">글로벌 서버</h3>
           <p class="text-sketch-line/70">
             🇯🇵 도쿄/오사카 · 🇸🇬 싱가포르 · 🇭🇰 홍콩에서 최적의 위치 선택
           </p>
@@ -574,73 +574,56 @@
         </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-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">
-            💡 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>
-
-      <!-- 자주 쓰는 명령어 -->
+      <!-- Cockpit 웹 콘솔 -->
       <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-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 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="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 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="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 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="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 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 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="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="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 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>
@@ -1009,6 +992,40 @@
     </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">&times;</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');