yuxing/Docker-Proxy
1
0
Fork 0
mirror of https://github.com/dqzboy/Docker-Proxy.git synced 2026-01-15 17:43:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add Ad Slot Styles to Proxy UI

Browse Source
This commit is contained in:
dqzboy
2024-07-22 16:37:27 +08:00
parent cee7e40003
commit 8deeea30dc
1 changed files with 45 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
HubCmdUI/docker-proxy.html
View File

@@ -53,6 +53,7 @@
}
.container {
max-width: 800px;
min-width: 800px; /* 固定容器宽度 */
width: 100%;
margin: 20px auto;
background: white;
@@ -60,6 +61,7 @@
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
flex-grow: 1;
position: relative;
}
h1, h2 {
border-bottom: 2px solid #eaecef;
@@ -95,6 +97,22 @@
button:hover {
background-color: #2c974b;
}
/* 广告容器样式 */
.ad-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 90px; /* 与获取命令按钮之间的间距 */
margin-bottom: 30px;
max-width: 800px;
min-width: 800px;
}
.ad-container img {
max-width: 100%;
width: 750; /* 广告图片宽度 */
height: 300px; /* 广告图片高度 */
border-radius: 8px;
}
pre {
background-color: #f6f8fa;
border-radius: 4px;
@@ -109,6 +127,10 @@
font-size: 12px;
margin-top: -5px;
background-color: #0366d6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.copy-btn:hover {
background-color: #0256b9;
@@ -178,39 +200,51 @@
</style>
</head>
<body>
<!-- 页眉 -->
<header class="header">
<div class="header-content">
<img src="https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/docker-proxy.png" alt="Logo" class="logo">
<nav class="nav-menu">
<a href="https://www.dqzboy.com" target="_blank">首页</a>
<a href="https://www.dqzboy.com" target="_blank">博客</a>
<a href="https://www.dqzboy.com/zanzu" target="_blank">捐赠</a>
<a href="https://t.me/dqzboyblog" target="_blank">交流群</a>
<a href="https://github.com/dqzboy/Docker-Proxy" target="_blank">GitHub</a>
<a href="javascript:void(0);" onclick="location.reload();">首页</a>
<a href="https://www.dqzboy.com" target="_blank">博客</a>
<a href="https://www.dqzboy.com/zanzu" target="_blank">捐赠</a>
<a href="https://t.me/dqzboyblog" target="_blank">交流群</a>
<a href="https://github.com/dqzboy/Docker-Proxy" target="_blank">GitHub</a>
</nav>
</div>
</header>
<!-- 内容容器 -->
<div class="container">
<h1>Docker 镜像代理加速</h1>
<div class="input-group">
<input type="text" id="imageInput" placeholder="输入 Docker 镜像，例如：nginx 或 mysql:5.7">
<button onclick="generateCommands()">获取加速命令</button>
</div>
<!-- 广告容器 -->
<div class="ad-container" id="adContainer">
<a href="https://example.com" target="_blank">
<img src="https://github.com/user-attachments/assets/595f645a-e4da-49fd-bd67-db93566a6152?text=Ad+Banner" alt="广告图片">
</a>
</div>
<!-- 结果容器 -->
<div id="result" style="display:none;">
<h2>加速命令</h2>
<div id="commandsContainer"></div>
</div>
</div>
<!-- 页脚 -->
<footer class="footer">
<p>Copyright © <span id="currentYear"></span> dqzboy.com. All Rights Reserved. <a href="https://github.com/dqzboy/Docker-Proxy" target="_blank" rel="noopener noreferrer">Docker-Proxy</a>版权所有</p>
</footer>
<!-- 返回顶部按钮 -->
<button id="backToTopBtn" onclick="scrollToTop()">⌃</button>
<script>
// 设置当前年份
document.getElementById('currentYear').textContent = new Date().getFullYear();
// 生成加速命令
function generateCommands() {
const imageInput = document.getElementById('imageInput').value.trim();
if (!imageInput) {
@@ -242,6 +276,7 @@
const container = document.getElementById('commandsContainer');
container.innerHTML = '';
// 将生成的命令添加到结果容器中
commands.forEach((command, index) => {
const cmdDiv = document.createElement('div');
cmdDiv.className = 'step';
@@ -253,10 +288,13 @@
container.appendChild(cmdDiv);
});
// 显示结果并隐藏广告
resultDiv.style.display = 'block';
document.getElementById('adContainer').style.display = 'none';
document.getElementById('backToTopBtn').style.display = 'block';
}
// 复制命令到剪贴板
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert('命令已复制到剪贴板');
@@ -265,6 +303,7 @@
});
}
// 滚动到顶部
function scrollToTop() {
window.scrollTo({
top: 0,
@@ -273,4 +312,4 @@
}
</script>
</body>
</html>
</html>