ouyang/Docker-Proxy
1
0
Fork 0
mirror of https://github.com/dqzboy/Docker-Proxy.git synced 2026-07-13 18:26:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Adjust the display style of the advertisement on the hubcmdui front end.

Browse Source
This commit is contained in:
dqzboy
2024-08-21 01:12:35 +08:00
parent 89e16ccd70
commit 48a69d7d31
3 changed files with 142 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hubcmdui/README.md
+5 -5
View File
@@ -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>
hubcmdui/config.json
+8
View File
@@ -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"
hubcmdui/web/index.html
+129 -33
View File
@@ -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>