Spaces:

nkjoy
/

space

Running

App Files Files Community

nkjoy commited on Jun 18, 2025

Commit

6d414b2

verified ·

1 Parent(s): 68ba319

Add 2 files

Browse files

Files changed (1) hide show

index.html +747 -37

index.html CHANGED Viewed

@@ -1,41 +1,751 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
-    <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
       }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
       }
-      h1 {
-        font-size: 50px;
       }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-qwensite.hf.space/arrow.svg" class="arrow" />
-    <script></script>
-  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=nkjoy/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>유튜브 키워드 리서치 도구 | 경쟁이 적은 키워드 찾기</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
+    body {
+      font-family: 'Noto Sans KR', sans-serif;
+      background-color: #f8fafc;
+    }
+    .gradient-bg {
+      background: linear-gradient(135deg, #FF0000 0%, #FF8C00 100%);
+    }
+    .keyword-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+    }
+    .competition-low {
+      background-color: #10b981;
+    }
+    .competition-medium {
+      background-color: #f59e0b;
+    }
+    .competition-high {
+      background-color: #ef4444;
+    }
+    .search-volume-high {
+      color: #10b981;
+    }
+    .search-volume-medium {
+      color: #f59e0b;
+    }
+    .search-volume-low {
+      color: #ef4444;
+    }
+    .tabs button.active {
+      background-color: white;
+      color: #ef4444;
+      border-bottom: 3px solid #ef4444;
+    }
+    .progress-bar {
+      height: 6px;
+      border-radius: 3px;
+      background-color: #e5e7eb;
+    }
+    .progress-fill {
+      height: 100%;
+      border-radius: 3px;
+      background: linear-gradient(90deg, #3b82f6, #6366f1);
+    }
+    .tooltip {
+      position: relative;
+      display: inline-block;
+    }
+    .tooltip .tooltiptext {
+      visibility: hidden;
+      width: 220px;
+      background-color: #374151;
+      color: #fff;
+      text-align: center;
+      border-radius: 6px;
+      padding: 8px;
+      position: absolute;
+      z-index: 1;
+      bottom: 125%;
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      font-size: 14px;
+    }
+    .tooltip:hover .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+    }
+    input:focus, textarea:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+    }
+  </style>
+</head>
+<body>
+  <div class="min-h-screen">
+    <!-- 헤더 -->
+    <header class="gradient-bg text-white py-8 px-4 md:px-8">
+      <div class="max-w-6xl mx-auto">
+        <div class="flex justify-between items-center">
+          <div>
+            <h1 class="text-3xl md:text-4xl font-bold">유튜브 키워드 파워 툴</h1>
+            <p class="mt-2 text-red-100">경쟁이 적고 검색량이 높은 키워드로 순위를 차지하세요</p>
+          </div>
+          <div class="hidden md:flex items-center space-x-2 bg-white/10 py-2 px-4 rounded-full">
+            <i class="fab fa-youtube text-red-500 text-2xl"></i>
+            <span class="font-semibold">유튜브 인증</span>
+          </div>
+        </div>
+      </div>
+    </header>
+    <!-- 메인 내용 -->
+    <main class="max-w-6xl mx-auto px-4 md:px-8 py-8 -mt-8">
+      <!-- 입력 카드 -->
+      <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+          <div class="md:col-span-2">
+            <label for="video-title" class="block text-lg font-semibold text-gray-800 mb-2">
+              <i class="fas fa-heading mr-2 text-red-500"></i>동영상 제목
+            </label>
+            <input
+              type="text"
+              id="video-title"
+              placeholder="동영상 제목을 입력하세요 (예: 완벽한 스크램블 에그 만드는 법)"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-red-500 transition-colors duration-300"
+            />
+            <div class="mt-1 text-sm text-gray-500">키워드 추천을 위해 주제 또는 제목을 입력하세요</div>
+          </div>
+          <div>
+            <label class="block text-lg font-semibold text-gray-800 mb-2">
+              <i class="fas fa-filter mr-2 text-red-500"></i>필터
+            </label>
+            <div class="flex space-x-2">
+              <select id="country" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg">
+                <option value="global">🌎 글로벌</option>
+                <option value="us">🇺🇸 미국</option>
+                <option value="uk">🇬🇧 영국</option>
+                <option value="ca">🇨🇦 캐나다</option>
+                <option value="au">🇦🇺 호주</option>
+                <option value="in">🇮🇳 인도</option>
+              </select>
+              <select id="language" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg">
+                <option value="ko">한국어</option>
+                <option value="en">영어</option>
+                <option value="es">스페인어</option>
+                <option value="pt">포르투갈어</option>
+                <option value="hi">힌디어</option>
+                <option value="fr">프랑스어</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="flex space-x-4">
+          <button
+            id="analyze-btn"
+            class="flex-1 bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-300 flex items-center justify-center"
+          >
+            <i class="fas fa-bolt mr-2"></i> 승리하는 키워드 찾기
+          </button>
+          <button
+            id="advanced-btn"
+            class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-6 rounded-lg transition-colors duration-300 flex items-center justify-center"
+          >
+            <i class="fas fa-sliders-h mr-2"></i> 고급 설정
+          </button>
+        </div>
+      </div>
+      <!-- 결과 섹션 -->
+      <div id="results-section" class="hidden">
+        <!-- 탭 -->
+        <div class="tabs flex mb-6 bg-gray-100 rounded-lg p-1">
+          <button class="tab-btn active flex-1 py-3 px-4 rounded-lg font-semibold" data-tab="keywords">
+            <i class="fas fa-key mr-2"></i> 키워드
+          </button>
+          <button class="tab-btn flex-1 py-3 px-4 rounded-lg font-semibold" data-tab="analysis">
+            <i class="fas fa-chart-bar mr-2"></i> 제목 분석
+          </button>
+          <button class="tab-btn flex-1 py-3 px-4 rounded-lg font-semibold" data-tab="competitors">
+            <i class="fas fa-users mr-2"></i> 경쟁자 분석
+          </button>
+        </div>
+        <!-- 키워드 탭 -->
+        <div id="keywords-tab" class="tab-content">
+          <div class="flex justify-between items-center mb-4">
+            <h3 class="text-xl font-semibold text-gray-800">상위 키워드 기회</h3>
+            <div class="flex items-center space-x-2">
+              <span class="text-sm text-gray-600">정렬 기준:</span>
+              <select id="sort-keywords" class="border border-gray-300 rounded-lg px-3 py-1">
+                <option value="relevance">관련성</option>
+                <option value="volume">검색량</option>
+                <option value="competition">경쟁도</option>
+                <option value="score">기회 점수</option>
+              </select>
+            </div>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8" id="keywords-container">
+            <!-- 키워드 카드가 여기에 삽입됩니다 -->
+          </div>
+          <div class="flex justify-center mb-8">
+            <button id="load-more" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition-colors duration-300">
+              더 많은 키워드 불러오기
+            </button>
+          </div>
+        </div>
+        <!-- 분석 탭 -->
+        <div id="analysis-tab" class="tab-content hidden">
+          <div class="bg-white rounded-lg shadow p-6 mb-8">
+            <h3 class="text-xl font-semibold text-gray-800 mb-4">제목 최적화 점수</h3>
+            <div class="flex items-center">
+              <div class="text-5xl font-bold text-red-600 mr-4">87</div>
+              <div class="flex-1">
+                <div class="progress-bar w-full mb-2">
+                  <div class="progress-fill" style="width: 87%"></div>
+                </div>
+                <p class="text-gray-600">제목이 잘 최적화되었습니다. CTR을 극대화하기 위해 약간의 개선을 제안합니다.</p>
+              </div>
+            </div>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+            <div class="bg-white rounded-lg shadow p-6">
+              <h4 class="text-lg font-semibold text-gray-800 mb-3">제목 강조</h4>
+              <ul class="space-y-2">
+                <li class="flex items-start">
+                  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                  <span>시작 부분에 주요 키워드 포함</span>
+                </li>
+                <li class="flex items-start">
+                  <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                  <span>60자 이하로 전체 표시 가능</span>
+                </li>
+                <li class="flex items-start">
+                  <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
+                  <span>강력한 단어 추가 권장 ("쉬운", "비법", "최고" 등)</span>
+                </li>
+              </ul>
+            </div>
+            <div class="bg-white rounded-lg shadow p-6">
+              <h4 class="text-lg font-semibold text-gray-800 mb-3">개선된 제목 제안</h4>
+              <ul class="space-y-3">
+                <li class="p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
+                  스크램블 에그 비법 (프로 셰프 기술)
+                </li>
+                <li class="p-3 bg-gray-100 rounded-lg">
+                  5분 만에 완벽한 스크램블 에그 (레스토랑보다 더 맛있게)
+                </li>
+                <li class="p-3 bg-gray-100 rounded-lg">
+                  미슐랭 스타 셰프처럼 스크램블 에그 만드는 법
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <!-- 경쟁자 탭 -->
+        <div id="competitors-tab" class="tab-content hidden">
+          <div class="bg-white rounded-lg shadow p-6 mb-8">
+            <h3 class="text-xl font-semibold text-gray-800 mb-4">상위 영상</h3>
+            <p class="text-gray-600 mb-4">당신이 맞서야 할 상대입니다. 대상 키워드로 상위 5개 영상을 분석했습니다.</p>
+            <div class="space-y-4">
+              <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
+                <div class="flex items-start">
+                  <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center text-red-500 mr-4 flex-shrink-0">
+                    <i class="fas fa-trophy"></i>
+                  </div>
+                  <div class="flex-1">
+                    <h4 class="font-semibold">완벽한 스크램블 에그 - 프로 셰프 비법</h4>
+                    <div class="flex items-center text-sm text-gray-500 mt-1">
+                      <span class="mr-3">고메이 쿠킹</span>
+                      <span><i class="fas fa-eye mr-1"></i> 240만 조회수</span>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-xs bg-red-500 text-white px-2 py-1 rounded-full inline-block">97% 일치</div>
+                    <div class="mt-2 flex items-center justify-end">
+                      <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-1">45% 시청률</span>
+                      <span class="text-xs bg-gray-100 px-2 py-1 rounded">8.2% CTR</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
+                <div class="flex items-start">
+                  <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center text-amber-500 mr-4 flex-shrink-0">
+                    <i class="fas fa-award"></i>
+                  </div>
+                  <div class="flex-1">
+                    <h4 class="font-semibold">언제나 완벽한 스크램블 에그 만드는 법</h4>
+                    <div class="flex items-center text-sm text-gray-500 mt-1">
+                      <span class="mr-3">집에서 요리</span>
+                      <span><i class="fas fa-eye mr-1"></i> 180만 조회수</span>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-xs bg-amber-500 text-white px-2 py-1 rounded-full inline-block">89% 일치</div>
+                    <div class="mt-2 flex items-center justify-end">
+                      <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-1">52% 시청률</span>
+                      <span class="text-xs bg-gray-100 px-2 py-1 rounded">7.5% CTR</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
+                <div class="flex items-start">
+                  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-500 mr-4 flex-shrink-0">
+                    <i class="fas fa-medal"></i>
+                  </div>
+                  <div class="flex-1">
+                    <h4 class="font-semibold">스크램블 에그 최고의 방법 (10가지 방법 테스트)</h4>
+                    <div class="flex items-center text-sm text-gray-500 mt-1">
+                      <span class="mr-3">푸드 사이언스</span>
+                      <span><i class="fas fa-eye mr-1"></i> 120만 조회수</span>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-xs bg-blue-500 text-white px-2 py-1 rounded-full inline-block">84% 일치</div>
+                    <div class="mt-2 flex items-center justify-end">
+                      <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-1">61% 시청률</span>
+                      <span class="text-xs bg-gray-100 px-2 py-1 rounded">6.9% CTR</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bg-white rounded-lg shadow p-6">
+            <h3 class="text-xl font-semibold text-gray-800 mb-4">경쟁자 분석 요약</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div class="bg-red-50 p-4 rounded-lg">
+                <div class="text-red-500 font-bold mb-1">평균 영상 길이</div>
+                <div class="text-2xl font-bold">7:24</div>
+                <div class="text-sm text-gray-600 mt-1">6-8분 길이의 영상이 적합</div>
+              </div>
+              <div class="bg-amber-50 p-4 rounded-lg">
+                <div class="text-amber-500 font-bold mb-1">평균 CTR</div>
+                <div class="text-2xl font-bold">7.7%</div>
+                <div class="text-sm text-gray-600 mt-1">7% 이상의 CTR이 필요</div>
+              </div>
+              <div class="bg-green-50 p-4 rounded-lg">
+                <div class="text-green-500 font-bold mb-1">평균 시청률</div>
+                <div class="text-2xl font-bold">53%</div>
+                <div class="text-sm text-gray-600 mt-1">55% 이상 목표</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 전문가 팁 섹션 -->
+      <div id="pro-tips" class="mt-12 bg-gradient-to-r from-red-50 to-amber-50 border border-red-100 rounded-lg p-6">
+        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+          <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> 유튜브 SEO 성공 팁
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="flex items-start">
+            <div class="bg-red-500 text-white rounded-full p-2 mr-3 flex-shrink-0">
+              <i class="fas fa-microphone-alt text-sm"></i>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-1">키워드 자연스럽게 사용</h4>
+              <p class="text-gray-600 text-sm">제목, 설명의 첫 100자, 설명 첫 문장, 대본에 자연스럽게 키워드를 포함하세요.</p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="bg-blue-500 text-white rounded-full p-2 mr-3 flex-shrink-0">
+              <i class="fas fa-user-clock text-sm"></i>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-1">긴 영상이 더 효과적</h4>
+              <p class="text-gray-600 text-sm">시청자가 오래 머무는 영상을 유튜브가 선호합니다. 대부분의 주제에 대해 8-12분을 목표로 하세요.</p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="bg-green-500 text-white rounded-full p-2 mr-3 flex-shrink-0">
+              <i class="fas fa-clock text-sm"></i>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-1">일정하게 업로드</h4>
+              <p class="text-gray-600 text-sm">주 1~2회 일정하게 업로드하면 유튜브가 당신을 적극적인 창작자로 인식합니다.</p>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <div class="bg-purple-500 text-white rounded-full p-2 mr-3 flex-shrink-0">
+              <i class="fas fa-chart-line text-sm"></i>
+            </div>
+            <div>
+              <h4 class="font-semibold mb-1">분석 및 최적화</h4>
+              <p class="text-gray-600 text-sm">업로드 후, 분석을 통해 시청자가 떠나는 지점을 확인하고 향후 콘텐츠를 개선하세요.</p>
+            </div>
+          </div>
+        </div>
+        <button class="mt-4 bg-white text-red-600 border border-red-200 hover:bg-red-50 font-semibold py-2 px-4 rounded-lg transition-colors duration-300 inline-flex items-center">
+          <i class="fas fa-rocket mr-2"></i> 맞춤형 유튜브 SEO 계획 받기
+        </button>
+      </div>
+    </main>
+    <!-- 푸터 -->
+    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
+      <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div>
+          <h4 class="text-white text-lg font-semibold mb-4">유튜브 키워드 파워 툴</h4>
+          <p class="text-sm">창작자가 경쟁이 적고 잠재력이 높은 키워드를 찾을 수 있도록 돕는 최고의 유튜브 키워드 리서치 도구입니다.</p>
+        </div>
+        <div>
+          <h4 class="text-white text-lg font-semibold mb-4">빠른 링크</h4>
+          <ul class="space-y-2 text-sm">
+            <li><a href="#" class="hover:text-white transition-colors">홈</a></li>
+            <li><a href="#" class="hover:text-white transition-colors">이용 방법</a></li>
+            <li><a href="#" class="hover:text-white transition-colors">요금제</a></li>
+            <li><a href="#" class="hover:text-white transition-colors">블로그</a></li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="text-white text-lg font-semibold mb-4">자료</h4>
+          <ul class="space-y-2 text-sm">
+            <li><a href="#" class="hover:text-white transition-colors">유튜브 SEO 가이드</a></li>
+            <li><a href="#" class="hover:text-white transition-colors">키워드 리서치 팁</a></li>
+            <li><a href="#" class="hover:text-white transition-colors">영상 순위 요소</a></li>
+            <li><a href="#" class="hover:text-white transition-colors">성공 사례</a></li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="text-white text-lg font-semibold mb-4">구독하기</h4>
+          <p class="text-sm mb-4">주간 유튜브 성장 팁과 키워드 업데이트를 받아보세요.</p>
+          <div class="flex">
+            <input type="email" placeholder="이메일 주소" class="px-3 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-1 focus:ring-red-500 flex-1"/>
+            <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-r-lg">
+              <i class="fas fa-paper-plane"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="max-w-6xl mx-auto mt-8 pt-8 border-t border-gray-800 text-sm text-center">
+        <p>© 2023 유튜브 키워드 파워 툴. 모든 권리 보유.</p>
+      </div>
+    </footer>
+  </div>
+  <script>
+    // 키워드 데이터 (실제 앱에서는 API에서 받아옴)
+    const keywordData = [
+      {
+        keyword: "완벽한 스크램블 에그 만드는 법",
+        volume: 135000,
+        competition: 0.32,
+        score: 92,
+        cpr: 45,
+        trend: "상승",
+        ctr: 8.2,
+        variations: ["스크램블 에그 레시피", "스크램블 에그 최고 방법", "프로 스크램블 에그"]
+      },
+      {
+        keyword: "부드러운 스크램블 에그",
+        volume: 82000,
+        competition: 0.18,
+        score: 95,
+        cpr: 32,
+        trend: "안정",
+        ctr: 8.5,
+        variations: ["부드러운 스크램블 에그 만드는 법", "부드러운 계란 레시피", "극강의 부드러움 스크램블 에그"]
+      },
+      {
+        keyword: "셰프처럼 스크램블 에그",
+        volume: 48000,
+        competition: 0.12,
+        score: 98,
+        cpr: 28,
+        trend: "상승",
+        ctr: 9.1,
+        variations: ["셰프가 만드는 스크램블 에그", "프로 셰프 스크램블 에그", "레스토랑 스타일 스크램블 에그"]
+      },
+      {
+        keyword: "쉬운 스크램블 에그 레시피",
+        volume: 67000,
+        competition: 0.25,
+        score: 89,
+        cpr: 41,
+        trend: "안정",
+        ctr: 7.5,
+        variations: ["간단한 스크램블 에그 레시피", "빠른 스크램블 에그", "재료 3가지 스크램블 에그"]
+      },
+      {
+        keyword: "스크램블 에그 최고 기술",
+        volume: 39000,
+        competition: 0.15,
+        score: 96,
+        cpr: 26,
+        trend: "상승",
+        ctr: 8.8,
+        variations: ["스크램블 에그 과학적 방법", "완벽한 스크램블 에그 기술", "고든 램지 스크램블 에그"]
+      },
+      {
+        keyword: "전자레인지 스크램블 에그",
+        volume: 104000,
+        competition: 0.45,
+        score: 76,
+        cpr: 58,
+        trend: "안정",
+        ctr: 6.2,
+        variations: ["전자레인지로 스크램블 에그 만드는 법", "전자레인지 계란 요리", "빠른 전자레인지 스크램블 에그"]
       }
+    ];
+    // DOM 요소
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const videoTitleInput = document.getElementById('video-title');
+    const resultsSection = document.getElementById('results-section');
+    const keywordsContainer = document.getElementById('keywords-container');
+    const loadMoreBtn = document.getElementById('load-more');
+    const tabBtns = document.querySelectorAll('.tab-btn');
+    const tabContents = document.querySelectorAll('.tab-content');
+    const sortSelect = document.getElementById('sort-keywords');
+    // 변수
+    let currentKeywords = [];
+    let displayedCount = 0;
+    const initialDisplayCount = 6;
+    const incrementDisplayCount = 3;
+    // 이벤트 리스너
+    analyzeBtn.addEventListener('click', analyzeKeywords);
+    loadMoreBtn.addEventListener('click', loadMoreKeywords);
+    sortSelect.addEventListener('change', sortKeywords);
+    tabBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tabId = btn.getAttribute('data-tab');
+        switchTab(tabId);
+      });
+    });
+    // 함수
+    function analyzeKeywords() {
+      const title = videoTitleInput.value.trim();
+      if (!title) {
+        alert('키워드를 분석하려면 동영상 제목을 입력하세요');
+        return;
       }
+      // 로딩 상태 표시
+      analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 분��� 중...';
+      analyzeBtn.disabled = true;
+      // API 호출 지연 시뮬레이션
+      setTimeout(() => {
+        currentKeywords = getRelevantKeywords(title);
+        displayedCount = Math.min(initialDisplayCount, currentKeywords.length);
+        displayKeywords(currentKeywords.slice(0, displayedCount));
+        resultsSection.classList.remove('hidden');
+        // 버튼 초기화
+        analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-2"></i> 승리하는 키워드 찾기';
+        analyzeBtn.disabled = false;
+        // 결과로 스크롤 이동
+        resultsSection.scrollIntoView({ behavior: 'smooth' });
+      }, 1500);
+    }
+    function getRelevantKeywords(title) {
+      const lowercaseTitle = title.toLowerCase();
+      return keywordData
+        .map(kw => {
+          const relevance = lowercaseTitle.includes(kw.keyword.split(' ')[0]) ? kw.score + 5 : kw.score;
+          return { ...kw, relevance };
+        })
+        .sort((a, b) => b.score - a.score);
+    }
+    function displayKeywords(keywords) {
+      keywordsContainer.innerHTML = '';
+      keywords.forEach(keyword => {
+        const card = document.createElement('div');
+        card.className = 'keyword-card bg-white rounded-lg shadow p-6 transition-transform duration-300 hover:shadow-lg';
+        let competitionClass = 'competition-high';
+        if (keyword.competition < 0.3) competitionClass = 'competition-low';
+        else if (keyword.competition < 0.5) competitionClass = 'competition-medium';
+        let volumeClass = 'search-volume-low';
+        if (keyword.volume > 80000) volumeClass = 'search-volume-high';
+        else if (keyword.volume > 40000) volumeClass = 'search-volume-medium';
+        card.innerHTML = `
+          <div class="flex justify-between items-start mb-2">
+            <h3 class="text-lg font-semibold text-gray-800">${keyword.keyword}</h3>
+            <div class="flex items-center">
+              <span class="text-sm font-semibold mr-2 ${volumeClass}">${formatNumber(keyword.volume)}</span>
+              <div class="tooltip cursor-pointer">
+                <span class="text-xs px-2 py-1 rounded-full ${competitionClass} text-white">${getCompetitionText(keyword.competition)}</span>
+                <span class="tooltiptext">
+                  <div class="text-left">
+                    <div class="font-semibold mb-1">경쟁 분석:</div>
+                    <div class="flex justify-between text-sm mb-1">
+                      <span>검색량:</span>
+                      <span>${formatNumber(keyword.volume)}</span>
+                    </div>
+                    <div class="flex justify-between text-sm mb-1">
+                      <span>경쟁도:</span>
+                      <span>${(keyword.competition * 100).toFixed(0)}/100</span>
+                    </div>
+                    <div class="flex justify-between text-sm mb-1">
+                      <span>클릭 가능성:</span>
+                      <span>${keyword.ctr.toFixed(1)}% CTR</span>
+                    </div>
+                    <div class="flex justify-between text-sm font-semibold mt-2">
+                      <span>기회 점수:</span>
+                      <span>${keyword.score}/100</span>
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center text-sm text-gray-500 mb-4">
+            <span class="mr-3"><i class="fas fa-bullseye mr-1"></i> ${keyword.cpr}% 클릭 가능성</span>
+            <span>
+              <i class="fas ${keyword.trend === '상승' ? 'fa-arrow-up text-green-500' : 'fa-arrow-right text-gray-400'} mr-1"></i>
+              ${keyword.trend === '상승' ? '상승' : '안정'} 트렌드
+            </span>
+          </div>
+          <div class="mb-4">
+            <div class="text-xs text-gray-500 mb-1">기회 점수</div>
+            <div class="w-full bg-gray-200 rounded-full h-2.5">
+              <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full" style="width: ${keyword.score}%"></div>
+            </div>
+          </div>
+          <div class="border-t pt-3">
+            <h4 class="text-sm font-semibold text-gray-700 mb-2">관련 변형:</h4>
+            <ul class="space-y-1 text-sm text-gray-600">
+              ${keyword.variations.slice(0, 3).map(variation => `
+                <li class="flex items-start">
+                  <i class="fas fa-check-circle text-green-500 text-xs mt-1 mr-2"></i>
+                  <span>${variation}</span>
+                </li>
+              `).join('')}
+            </ul>
+          </div>
+          <div class="flex justify-between mt-4">
+            <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg transition-colors">
+              <i class="fas fa-plus mr-1"></i> 목록에 추가
+            </button>
+            <button class="text-xs bg-blue-50 hover:bg-blue-100 text-blue-600 px-3 py-1 rounded-lg transition-colors">
+              <i class="fas fa-share-alt mr-1"></i> 공유
+            </button>
+          </div>
+        `;
+        keywordsContainer.appendChild(card);
+      });
+      loadMoreBtn.classList.toggle('hidden', displayedCount >= currentKeywords.length);
+    }
+    function loadMoreKeywords() {
+      const nextBatch = currentKeywords.slice(displayedCount, displayedCount + incrementDisplayCount);
+      displayKeywords([...document.querySelectorAll('.keyword-card'), ...nextBatch]);
+      displayedCount += incrementDisplayCount;
+    }
+    function sortKeywords() {
+      const sortBy = sortSelect.value;
+      switch(sortBy) {
+        case 'volume':
+          currentKeywords.sort((a, b) => b.volume - a.volume);
+          break;
+        case 'competition':
+          currentKeywords.sort((a, b) => a.competition - b.competition);
+          break;
+        case 'score':
+          currentKeywords.sort((a, b) => b.score - a.score);
+          break;
+        case 'relevance':
+        default:
+          currentKeywords.sort((a, b) => b.relevance - a.relevance);
+          break;
       }
+      displayedCount = Math.min(initialDisplayCount, currentKeywords.length);
+      displayKeywords(currentKeywords.slice(0, displayedCount));
+    }
+    function switchTab(tabId) {
+      tabBtns.forEach(btn => {
+        if (btn.getAttribute('data-tab') === tabId) {
+          btn.classList.add('active');
+        } else {
+          btn.classList.remove('active');
+        }
+      });
+      tabContents.forEach(content => {
+        if (content.id === `${tabId}-tab`) {
+          content.classList.remove('hidden');
+        } else {
+          content.classList.add('hidden');
+        }
+      });
+    }
+    function formatNumber(num) {
+      if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+      if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+      return num;
+    }
+    function getCompetitionText(competition) {
+      if (competition < 0.3) return '낮음';
+      if (competition < 0.5) return '중간';
+      return '높음';
+    }
+  </script>
+  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px; position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">
+    Made with
+    <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite 로고" style="width: 16px; height: 16px; vertical-align: middle; display: inline-block; margin-right: 3px; filter: brightness(0) invert(1);">
+    <a href="https://enzostvs-deepsite.hf.space" style="color: #fff; text-decoration: underline;" target="_blank">DeepSite</a> -
+    <a href="https://enzostvs-deepsite.hf.space?remix=Nomnom38/youtube-keyword-tool" style="color: #fff; text-decoration: underline;" target="_blank">🧬 리믹스</a>
+  </p>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=nkjoy/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>