Update index.html

index.html

@@ -68,10 +68,22 @@
       border: 1px solid #ddd;
       border-radius: 4px;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
     #sidebar li:hover {
       background-color: #f0f0f0;
     }
+    #sidebar li button {
+      margin-left: 8px;
+      padding: 4px 8px;
+      cursor: pointer;
+      font-size: 12px;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+      background-color: #fafafa;
+    }
     #embed-container {
       flex: 1;
       padding: 0;
@@ -342,32 +354,32 @@
       "aiqtech/imaginpaint": "Image Edit",
     };
 
-const newProjects = [
-    "fantos/Panorama",
-    "ginigen/Multi-LoRAgen",
-    "ginipick/Fashion-Stylegen",
-    "ginipick/Time-Stream",
-    "ginipick/AccuVision-Diffusion",
-    "fantos/Magic-Drawings",
-    "ginigen/Lumina-Image-PLUS",
-    "fantaxy/fantasy-novel",
-    "VIDraft/mouse-webgen",
-    "immunobiotech/MUSIC-Jukebox"
-];
-
-const bestProjects = [
-    "ginigen/canvas-studio",
-    "ginipick/Time-Stream",
-    "ginipick/AccuVision-Diffusion",
-    "fantos/Magic-Drawings",
-    "ginigen/Lumina-Image-PLUS",
-    "fantaxy/fantasy-novel",
-    "VIDraft/mouse-webgen",
-    "immunobiotech/MUSIC-Jukebox",
-    "seawolf2357/Flowise-AI",
-    "ginigen/Flux-LayerDiffuse"
-];
+    // 3. NEW, BEST 지정
+    const newProjects = [
+      "fantos/Panorama",
+      "ginigen/Multi-LoRAgen",
+      "ginipick/Fashion-Stylegen",
+      "ginipick/Time-Stream",
+      "ginipick/AccuVision-Diffusion",
+      "fantos/Magic-Drawings",
+      "ginigen/Lumina-Image-PLUS",
+      "fantaxy/fantasy-novel",
+      "VIDraft/mouse-webgen",
+      "immunobiotech/MUSIC-Jukebox"
+    ];
 
+    const bestProjects = [
+      "ginigen/canvas-studio",
+      "ginipick/Time-Stream",
+      "ginipick/AccuVision-Diffusion",
+      "fantos/Magic-Drawings",
+      "ginigen/Lumina-Image-PLUS",
+      "fantaxy/fantasy-novel",
+      "VIDraft/mouse-webgen",
+      "immunobiotech/MUSIC-Jukebox",
+      "seawolf2357/Flowise-AI",
+      "ginigen/Flux-LayerDiffuse"
+    ];
 
     // 4. URL 변환 함수
     function transformUrl(url) {
@@ -433,10 +445,26 @@ const bestProjects = [
       const ul = document.createElement("ul");
       items.forEach(item => {
         const li = document.createElement("li");
-        li.textContent = item.name;
+
+        // 이름 표시
+        const nameSpan = document.createElement("span");
+        nameSpan.textContent = item.name;
+        li.appendChild(nameSpan);
+
+        // "링크 클릭" 버튼
+        const linkButton = document.createElement("button");
+        linkButton.textContent = "링크 클릭";
+        linkButton.addEventListener("click", (event) => {
+          event.stopPropagation(); // li 클릭 이벤트와 구분
+          window.open(item.url, "_blank"); // 새 탭(창) 열기
+        });
+        li.appendChild(linkButton);
+
+        // li 자체 클릭하면 iframe 변경
         li.addEventListener("click", () => {
           document.getElementById("embed-frame").src = item.url;
         });
+
         ul.appendChild(li);
       });
       sidebar.appendChild(ul);
@@ -461,4 +489,4 @@ const bestProjects = [
     updateSidebar("all");
   </script>
 </body>
-</html>
+</html>