| 自定义 CSS |
.network-switch-buttons {
position: fixed; /* 固定位置 */
top: 20px; /* 距离顶部 20px */
right: 20px; /* 距离右侧 20px */
width: auto; /* 宽度自适应 */
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
border-radius: 10px; /* 圆角 */
padding: 10px; /* 内边距 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
z-index: 1000; /* 确保在其他元素之上 */
text-align: center; /* 内容居中对齐 */
}
.network-switch-buttons button {
margin: 5px; /* 按钮间距 */
padding: 10px 15px; /* 按钮内边距 */
border: none; /* 去掉边框 */
border-radius: 8px; /* 圆角按钮 */
background-color: #383E59; /* 按钮背景色 */
color: white; /* 按钮文字颜色 */
cursor: pointer; /* 鼠标悬停时显示手型 */
transition: background-color 0.2s; /* 背景色过渡效果 */
}
.network-switch-buttons button:hover {
background-color: #0056b3; /* 悬停时的背景色 */
}
.disabled {
color: gray; /* 灰色字体 */
pointer-events: none; /* 禁用点击 */
background-color: #ccc; /* 禁用状态的背景色 */
}
|
|
| 自定义 JavaScript |
// 添加切换网络的功能
function switchNetwork(network) {
const internalButton = document.getElementById('internalButton');
const externalButton = document.getElementById('externalButton');
if (network === 'internal') {
internalButton.classList.add('disabled'); // 设置内网按钮为灰色
externalButton.classList.remove('disabled'); // 恢复外网按钮为正常
setTimeout(() => {
window.location.href = 'http://192.168.18.5:8080'; // 内网 Heimdall 地址
}, 100); // 延迟 100 毫秒重定向
} else {
externalButton.classList.add('disabled'); // 设置外网按钮为灰色
internalButton.classList.remove('disabled'); // 恢复内网按钮为正常
setTimeout(() => {
window.location.href = 'https://heimdall.find.cloudns.ch'; // 外网 Heimdall 地址
}, 100); // 延迟 100 毫秒重定向
}
}
// 将按钮插入页面
window.addEventListener("DOMContentLoaded", () => {
const switchButtonsContainer = document.createElement('div');
switchButtonsContainer.className = 'network-switch-buttons';
// 正确设置 innerHTML
switchButtonsContainer.innerHTML = `
<h4 style="margin: 0;"></h4>
<button id="internalButton" onclick="switchNetwork('internal')">Go内网</button>
<button id="externalButton" onclick="switchNetwork('external')">Go外网</button>
`;
// 将按钮容器添加到页面
document.body.appendChild(switchButtonsContainer);
});
|
|