From 48a69d7d31d55f48a325f6474d74ea919c539f15 Mon Sep 17 00:00:00 2001
From: dqzboy <coolboydqz@gmail.com>
Date: Wed, 21 Aug 2024 01:12:35 +0800
Subject: [PATCH] fix: Adjust the display style of the advertisement on the
 hubcmdui front end.

---
 hubcmdui/README.md      |  10 +--
 hubcmdui/config.json    |   8 ++
 hubcmdui/web/index.html | 162 ++++++++++++++++++++++++++++++++--------
 3 files changed, 142 insertions(+), 38 deletions(-)

diff --git a/hubcmdui/README.md b/hubcmdui/README.md
index e713bb4..ae5354a 100644
--- a/hubcmdui/README.md
+++ b/hubcmdui/README.md
@@ -83,7 +83,7 @@ docker logs -f [容器ID或名称]
 
 ---
 
-## UI
+## UI界面
 
 - 默认容器监听`3000`端口，映射宿主机端口`30080`
 
@@ -91,7 +91,7 @@ docker logs -f [容器ID或名称]
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/80b347b6-cfb4-43ec-b473-7e38943fe517"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/637756c0-65b3-4f1a-b65d-14f522fd1660"?raw=true"></td>
     </tr>
 </table>
 
@@ -101,17 +101,17 @@ docker logs -f [容器ID或名称]
     </tr>
 </table>
 
-> 浏览器输入 `服务器地址/admin:30080` 访问后端页面，默认登入账号密码: root/admin@123
+> 浏览器输入 `服务器地址:30080/admin` 访问后端页面，默认登入账号密码: root/admin@123
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/d5d97581-42c1-4a21-9c3a-fddf3bfc67cd"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/8c4241a5-e5cc-418c-8020-75eebe7f2fd1"?raw=true"></td>
     </tr>
 </table>
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/914aebb1-8668-40a6-89bc-9d8bf29a34a2"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/4690d899-0ee3-40e5-b5a2-861e750210ed"?raw=true"></td>
     </tr>
 </table>
 
diff --git a/hubcmdui/config.json b/hubcmdui/config.json
index 8f88380..e3ab4f2 100644
--- a/hubcmdui/config.json
+++ b/hubcmdui/config.json
@@ -16,6 +16,14 @@
     {
       "url": "https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/reacknerd-ad.png",
       "link": "https://my.racknerd.com/aff.php?aff=12151"
+    },
+    {
+      "url": "https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/racknerd_vps.png",
+      "link": "https://my.racknerd.com/aff.php?aff=12151"
+    },
+    {
+      "url": "https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/docker-proxy-vip.png",
+      "link": "https://www.dqzboy.com/17834.html"
     }
   ],
   "proxyDomain": "dqzboy.github.io"
diff --git a/hubcmdui/web/index.html b/hubcmdui/web/index.html
index f970f5a..004d3f6 100644
--- a/hubcmdui/web/index.html
+++ b/hubcmdui/web/index.html
@@ -96,16 +96,57 @@
         button:hover {
             background-color: #2c974b;
         }
-        .ad-container {
+        .carousel {
+            width: 100%;
+            height: 300px;
             display: flex;
             justify-content: center;
             align-items: center;
+            perspective: 1000px;
+            position: relative;
             margin-top: 30px;
             margin-bottom: 30px;
         }
-        .ad-container img {
-            max-width: 100%;
-            border-radius: 8px;
+        .carousel-inner {
+            position: relative;
+            width: 50%;
+            height: 100%;
+            transform-style: preserve-3d;
+            transform: translateZ(-300px);
+            transition: transform 1s;
+        }
+        .carousel-item {
+            position: absolute;
+            width: 70%;
+            height: 100%;
+            left: 50%;
+            top: 0;
+            transform-origin: center center;
+            transition: transform 1s, opacity 1s;
+            opacity: 0.5;
+        }
+        .carousel-item.active {
+            transform: translateX(-50%) translateZ(300px);
+            opacity: 1;
+        }
+        .carousel-item.left {
+            transform: translateX(-150%) translateZ(100px) rotateY(30deg);
+        }
+        .carousel-item.right {
+            transform: translateX(50%) translateZ(100px) rotateY(-30deg);
+        }
+        .carousel-control {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 2em;
+            cursor: pointer;
+        }
+        .carousel-control.left {
+            left: 10px;
+        }
+        .carousel-control.right {
+            right: 10px;
         }
         pre {
             background-color: #f6f8fa;
@@ -211,9 +252,13 @@
                 width: 100%;
                 padding: 10px;
             }
-            .ad-container img {
-                width: 100%;
-                height: auto;
+            .carousel {
+                height: 300px;
+            }
+            .carousel-item {
+                width: 80%;
+                height: 70%;
+                left: 10%;
             }
         }
         @media (min-width: 769px) {
@@ -224,7 +269,7 @@
         .notification {
             display: none;
             position: absolute;
-            top: 7px; /* Adjust the position as needed */
+            top: 7px;
             left: 87%;
             transform: translateX(-50%);
             background-color: #333;
@@ -256,8 +301,12 @@
             <button onclick="generateCommands()">获取加速命令</button>
         </div>
         <!-- 广告容器 -->
-        <div class="ad-container" id="adContainer" style="display: flex;">
-            <!-- 广告内容将通过 JavaScript 动态加载 -->
+        <div class="carousel" id="carousel">
+            <div class="carousel-inner" id="carouselInner">
+                <!-- 图片将在 JavaScript 中加载 -->
+            </div>
+            <div class="carousel-control left" onclick="prevSlide()">&#10094;</div>
+            <div class="carousel-control right" onclick="nextSlide()">&#10095;</div>
         </div>
         <!-- 结果容器 -->
         <div id="result" style="display:none;">
@@ -278,6 +327,8 @@
         document.getElementById('currentYear').textContent = new Date().getFullYear();
 
         let proxyDomain = ''; // 默认代理加速地址
+        let currentIndex = 0;
+        let items = [];
 
         // 生成加速命令
         function generateCommands() {
@@ -321,7 +372,7 @@
 
             // 显示结果并隐藏广告
             resultDiv.style.display = 'block';
-            document.getElementById('adContainer').style.display = 'none';
+            document.getElementById('carousel').style.display = 'none';
             document.getElementById('backToTopBtn').style.display = 'block';
         }
 
@@ -334,7 +385,6 @@
                     console.error('无法复制文本: ', err);
                 });
             } else {
-                // 回退方案：使用临时的 <textarea> 元素
                 const textarea = document.createElement('textarea');
                 textarea.value = text;
                 document.body.appendChild(textarea);
@@ -367,6 +417,45 @@
             });
         }
 
+        let autoPlayTimer; // 用于存储自动播放的定时器
+
+        // 更新轮播图
+        function updateCarousel() {
+            items.forEach((item, index) => {
+                item.classList.remove('active', 'left', 'right');
+                if (index === currentIndex) {
+                    item.classList.add('active');
+                } else if (index === (currentIndex - 1 + items.length) % items.length) {
+                    item.classList.add('left');
+                } else if (index === (currentIndex + 1) % items.length) {
+                    item.classList.add('right');
+                }
+            });
+        }
+
+        function prevSlide() {
+            currentIndex = (currentIndex - 1 + items.length) % items.length;
+            updateCarousel();
+            resetAutoPlay(); // 重置自动播放计时器
+        }
+
+        function nextSlide() {
+            currentIndex = (currentIndex + 1) % items.length;
+            updateCarousel();
+            resetAutoPlay(); // 重置自动播放计时器
+        }
+
+        // 开始自动播放
+        function startAutoPlay() {
+            autoPlayTimer = setInterval(nextSlide, 10000); // 每10秒自动切换到下一张
+        }
+ 
+        // 重置自动播放计时器
+        function resetAutoPlay() {
+            clearInterval(autoPlayTimer);
+            startAutoPlay();
+        }
+
         // 获取并加载配置
         async function loadConfig() {
             try {
@@ -389,34 +478,33 @@
                     });
                 }
                 if (config.adImages && Array.isArray(config.adImages)) {
-                    const adContainer = document.getElementById('adContainer');
-                    adContainer.innerHTML = ''; // 清空广告容器
+                    const carouselInner = document.getElementById('carouselInner');
+                    carouselInner.innerHTML = ''; // 清空广告容器
                     config.adImages.forEach((ad, index) => {
-                        const adLink = document.createElement('a');
-                        adLink.href = ad.link;
-                        adLink.target = '_blank';
+                        const adItem = document.createElement('div');
+                        adItem.className = 'carousel-item';
+                        if (index === 0) {
+                            adItem.classList.add('active');
+                        }
                         const adImage = document.createElement('img');
                         adImage.src = ad.url;
                         adImage.alt = ad.alt || '广告图片';
-                        adImage.style.display = 'none'; // 初始状态隐藏所有广告图片
-                        adLink.appendChild(adImage);
-                        adContainer.appendChild(adLink);
-                    });
+                        adImage.style.width = "100%";
+                        adImage.style.height = "100%";
+                        adItem.appendChild(adImage);
+                        carouselInner.appendChild(adItem);
 
-                    // 轮播功能
-                    let currentAdIndex = 0;
-                    const adImages = adContainer.querySelectorAll('img');
-                    function showAd(index) {
-                        adImages.forEach((img, i) => {
-                            img.style.display = i === index ? 'block' : 'none';
+                        // 添加点击事件监听器
+                        adItem.addEventListener('click', function() {
+                            window.open(ad.link, '_blank');
                         });
-                    }
-                    showAd(currentAdIndex); // 显示第一张广告图片
 
-                    setInterval(() => {
-                        currentAdIndex = (currentAdIndex + 1) % adImages.length;
-                        showAd(currentAdIndex);
-                    }, 5000); // 每5秒切换一次广告
+                        // 改变鼠标样式，表明可以点击
+                        adItem.style.cursor = 'pointer';
+                    });
+                    items = document.querySelectorAll('.carousel-item');
+                    updateCarousel();
+                    startAutoPlay(); // 启动自动播放
                 }
                 if (config.proxyDomain) {
                     proxyDomain = config.proxyDomain;
@@ -427,6 +515,14 @@
         }
 
         loadConfig();
+        // 当页面不可见时暂停自动播放，可见时恢复
+        document.addEventListener("visibilitychange", function() {
+            if (document.hidden) {
+                clearInterval(autoPlayTimer);
+            } else {
+                startAutoPlay();
+            }
+        });
     </script>
 </body>
 </html>
\ No newline at end of file