mirror of
https://github.com/sky22333/hubproxy.git
synced 2026-08-05 11:35:11 +08:00
重构优化
This commit is contained in:
starry
GitHub
BIN
src/public/favicon.ico
Normal file
BIN
src/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
542
src/public/index.html
Normal file
542
src/public/index.html
Normal file
@@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Github文件加速,docker镜像加速">
|
||||
<meta name="keywords" content="Github,文件加速,ghproxy,docker镜像加速">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>Github文件加速</title>
|
||||
<link rel="icon" href="./favicon.ico">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">
|
||||
<style>
|
||||
:root {
|
||||
--color: #fafafa;
|
||||
--fontcolor: #333;
|
||||
--inputcolor: #f5f5f5;
|
||||
--inputcolor-font: #333;
|
||||
--card-bg: #f8f9fa;
|
||||
--border-color: #dee2e6;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: #53535338;
|
||||
--fontcolor: #b8b8b8;
|
||||
--inputcolor: #012333;
|
||||
--inputcolor-font: #969696d8;
|
||||
--card-bg: #012333;
|
||||
--border-color: #2d3338;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color);
|
||||
color: var(--fontcolor);
|
||||
font-family: 'Misans', Arial, sans-serif;
|
||||
padding: 30px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: #39c5bb;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
min-height: 65%;
|
||||
line-height: 1.25;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--fontcolor);
|
||||
font-weight: bold;
|
||||
margin-bottom: 20%;
|
||||
}
|
||||
|
||||
.rounded-button {
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
padding: 10px 30px;
|
||||
background-color: #555c5c;
|
||||
color: rgb(255, 255, 255);
|
||||
border: none;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.rounded-button:hover {
|
||||
background-color: #39c5bcda;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.tips>p:first-child::before {
|
||||
position: sticky;
|
||||
color: #7b7b7b;
|
||||
margin-bottom: 1%;
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
line-height: 1.25;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #012333;
|
||||
color: #39c5bc;
|
||||
padding: 15px 20px 15px 20px;
|
||||
margin: 0px 0;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #bd3c35;
|
||||
border-radius: 50%;
|
||||
box-shadow: 20px 0 0 #d69f27, 40px 0 0 #39c5bb;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 65%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: var(--inputcolor);
|
||||
color: var(--inputcolor-font);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: var(--inputcolor);
|
||||
color: var(--inputcolor-font);
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 20px;
|
||||
font-size: clamp(0.8rem, 2vw, 1.1rem);
|
||||
}
|
||||
|
||||
.status-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 1px;
|
||||
margin-top: -2%;
|
||||
font-size: clamp(0.8rem, 2vw, 1.05rem);
|
||||
}
|
||||
|
||||
.code {
|
||||
position: relative;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 217, 224, 0.822);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1;
|
||||
font-size: 0.85rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.redir-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 65px;
|
||||
background: rgba(0, 217, 224, 0.822);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1;
|
||||
font-size: 0.85rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
pre:hover .copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#visitor-info {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#toast {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #39c5bcde;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 90%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.docker-button {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
background-color: #f6f6f6;
|
||||
border: 2px solid #ececec;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.docker-button:hover {
|
||||
background-color: #39c5bc;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
margin: 10% auto;
|
||||
padding: 30px;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.domain-container {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.domain-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.domain-item:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.domain-text {
|
||||
font-family: 'Consolas', monospace;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal h1 {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hosts-button {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 2px 8px;
|
||||
background-color: #f5f5f5;
|
||||
border: 0px solid #fafafa;
|
||||
color: #333;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hosts-button:hover {
|
||||
background-color: #39c5bc;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 80px;
|
||||
padding: 2px 8px;
|
||||
background-color: #f5f5f5;
|
||||
border: 0px solid #fafafa;
|
||||
color: #333;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
background-color: #39c5bc;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
color: var(--fontcolor);
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.github-link svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="https://gitee.com/if-the-wind/github-hosts/raw/main/hosts" target="_blank" class="hosts-button">hosts</a>
|
||||
<a href="/skopeo.html" class="download-button">镜像包下载</a>
|
||||
<a href="/search.html" style="right: 180px;" class="download-button">镜像搜索</a>
|
||||
<div class="container">
|
||||
<h1>Github文件加速</h1>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="githubLinkInput" placeholder="输入需要加速的Github链接">
|
||||
</div>
|
||||
<button class="btn rounded-button" id="formatButton">获取加速链接</button>
|
||||
|
||||
<div class="code" id="outputBlock">
|
||||
<button class="copy-button" id="copyButton">复制</button>
|
||||
<button class="redir-button" id="redirButton">打开</button>
|
||||
<pre id="formattedLinkOutput"></pre>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<div class="tips-content">
|
||||
<p>支持release、archive文件，支持git clone、wget、curl等等操作<br>支持Al模型库Hugging Face</p><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="docker-button" id="dockerButton">Docker镜像加速</button>
|
||||
</div>
|
||||
|
||||
<div id="dockerModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button" id="closeModal">×</span>
|
||||
<h1>Docker镜像加速</h1>
|
||||
<h5>请根据对应的仓库使用对应的加速域名</h5>
|
||||
<div class="domain-container">
|
||||
<div class="domain-item">
|
||||
<div class="domain-text">docker.<span class="domain-base"></span></div>
|
||||
</div>
|
||||
<div class="domain-item">
|
||||
<div class="domain-text">ghcr.<span class="domain-base"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast" style="display:none;">
|
||||
链接已复制到剪贴板
|
||||
</div>
|
||||
<footer>
|
||||
<a href="https://github.com/sky22333/hubproxy" target="_blank" class="github-link">
|
||||
<svg height="32" viewBox="0 0 16 16" width="32">
|
||||
<path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
function getRootDomain() {
|
||||
let hostname = window.location.hostname;
|
||||
let parts = hostname.split('.');
|
||||
if(parts.length > 2) {
|
||||
return parts.slice(-2).join('.');
|
||||
}
|
||||
return hostname;
|
||||
}
|
||||
|
||||
let rootDomain = getRootDomain();
|
||||
document.querySelectorAll('.domain-base').forEach(span => {
|
||||
span.textContent = rootDomain;
|
||||
});
|
||||
|
||||
const modal = document.getElementById('dockerModal');
|
||||
const dockerButton = document.getElementById('dockerButton');
|
||||
const closeButton = document.getElementById('closeModal');
|
||||
|
||||
dockerButton.onclick = function() {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
closeButton.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function formatGithubLink() {
|
||||
var githubLinkInput = document.getElementById('githubLinkInput');
|
||||
var currentHost = window.location.host;
|
||||
var formattedLink = "";
|
||||
var link = githubLinkInput.value.trim();
|
||||
|
||||
if (link.startsWith("https://") || link.startsWith("http://")) {
|
||||
formattedLink = "https://" + currentHost + "/" + link;
|
||||
} else if (
|
||||
link.startsWith("github.com/") ||
|
||||
link.startsWith("raw.githubusercontent.com/") ||
|
||||
link.startsWith("gist.githubusercontent.com/") ||
|
||||
link.startsWith("huggingface.co/") ||
|
||||
link.startsWith("cdn-lfs.hf.co/") ||
|
||||
link.startsWith("download.docker.com/")
|
||||
) {
|
||||
formattedLink = "https://" + currentHost + "/https://" + link;
|
||||
} else {
|
||||
showToast('请输入有效的链接');
|
||||
return;
|
||||
}
|
||||
|
||||
var formattedLinkOutput = document.getElementById('formattedLinkOutput');
|
||||
formattedLinkOutput.textContent = formattedLink;
|
||||
displayButton();
|
||||
}
|
||||
|
||||
|
||||
function displayButton() {
|
||||
var copyButton = document.getElementById('copyButton');
|
||||
var redirButton = document.getElementById('redirButton');
|
||||
copyButton.style.display = 'block';
|
||||
redirButton.style.display = 'block';
|
||||
}
|
||||
|
||||
function redirToFormattedLink() {
|
||||
var formattedLinkOutput = document.getElementById('formattedLinkOutput');
|
||||
console.log(formattedLinkOutput.textContent);
|
||||
window.open(formattedLinkOutput.textContent);
|
||||
}
|
||||
|
||||
document.getElementById('formatButton').addEventListener('click', formatGithubLink);
|
||||
document.getElementById('copyButton').addEventListener('click', function () {
|
||||
const output = document.getElementById('formattedLinkOutput');
|
||||
const range = document.createRange();
|
||||
range.selectNode(output);
|
||||
window.getSelection().removeAllRanges();
|
||||
window.getSelection().addRange(range);
|
||||
document.execCommand('copy');
|
||||
window.getSelection().removeAllRanges();
|
||||
showToast('链接已复制到剪贴板');
|
||||
});
|
||||
document.getElementById('redirButton').addEventListener('click', redirToFormattedLink);
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = message;
|
||||
toast.style.display = 'block';
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.display = 'none';
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1071
src/public/search.html
Normal file
1071
src/public/search.html
Normal file
File diff suppressed because it is too large
Load Diff
505
src/public/skopeo.html
Normal file
505
src/public/skopeo.html
Normal file
@@ -0,0 +1,505 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Docker镜像批量下载工具,docker镜像打包下载">
|
||||
<meta name="keywords" content="Docker,镜像下载,skopeo,docker镜像打包">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>Docker镜像批量下载</title>
|
||||
<link rel="icon" href="./favicon.ico">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">
|
||||
<style>
|
||||
:root {
|
||||
--color: #fafafa;
|
||||
--fontcolor: #333;
|
||||
--inputcolor: #f5f5f5;
|
||||
--inputcolor-font: #333;
|
||||
--card-bg: #f8f9fa;
|
||||
--border-color: #dee2e6;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: #53535338;
|
||||
--fontcolor: #b8b8b8;
|
||||
--inputcolor: #012333;
|
||||
--inputcolor-font: #969696d8;
|
||||
--card-bg: #012333;
|
||||
--border-color: #2d3338;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color);
|
||||
color: var(--fontcolor);
|
||||
font-family: 'Misans', Arial, sans-serif;
|
||||
padding: 30px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: #39c5bb;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
min-height: 65%;
|
||||
line-height: 1.25;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--fontcolor);
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.rounded-button {
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
padding: 10px 30px;
|
||||
background-color: #555c5c;
|
||||
color: rgb(255, 255, 255);
|
||||
border: none;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.rounded-button:hover {
|
||||
background-color: #39c5bcda;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
line-height: 1.25;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #012333;
|
||||
color: #39c5bc;
|
||||
padding: 15px 20px 15px 20px;
|
||||
margin: 0px 0;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #bd3c35;
|
||||
border-radius: 50%;
|
||||
box-shadow: 20px 0 0 #d69f27, 40px 0 0 #39c5bb;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 65%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: var(--inputcolor);
|
||||
color: var(--inputcolor-font);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: var(--inputcolor);
|
||||
color: var(--inputcolor-font);
|
||||
}
|
||||
|
||||
#toast {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #39c5bcde;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 90%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
padding: 2px 8px;
|
||||
background-color: #f5f5f5;
|
||||
border: 0px solid #fafafa;
|
||||
color: #333;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #39c5bc;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.total-progress-text {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
background-color: var(--inputcolor);
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.image-progress {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.image-progress-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.image-progress-name {
|
||||
flex: 0 0 200px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-progress-bar-container {
|
||||
flex-grow: 1;
|
||||
height: 15px;
|
||||
background-color: #ddd;
|
||||
border-radius: 5px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.image-progress-bar {
|
||||
height: 100%;
|
||||
background-color: #39c5bb;
|
||||
border-radius: 5px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.image-progress-text {
|
||||
flex: 0 0 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
background-color: #39c5bb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
background-color: #2ea89e;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: 150px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--fontcolor);
|
||||
opacity: 0.8;
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="/" class="back-button">返回</a>
|
||||
<div class="container">
|
||||
<h1>Docker离线镜像包下载</h1>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="info-text">每行输入一个镜像，跟docker pull的格式一样，多个镜像会自动打包到一起为zip包，单个镜像为tar包。导入镜像后需要手动为镜像添加名称和标签，例如：docker tag 1856948a5aa7 镜像名称:标签</div>
|
||||
<textarea class="form-control" id="imageInput" placeholder="例如： nginx stilleshan/frpc stilleshan/frpc:0.62.1"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="info-text">镜像架构，默认为 amd64</div>
|
||||
<input type="text" class="form-control" id="platformInput" placeholder="输入架构，例如：amd64, arm64等" value="amd64">
|
||||
</div>
|
||||
|
||||
<button class="btn rounded-button" id="downloadButton">开始下载</button>
|
||||
|
||||
<div class="progress-container" id="progressContainer">
|
||||
<div class="total-progress-text" id="totalProgressText">0/0 - 0%</div>
|
||||
|
||||
<div class="image-progress" id="imageProgressList">
|
||||
<!-- Image progress items will be added here -->
|
||||
</div>
|
||||
|
||||
<button class="download-button" id="getFileButton">下载文件</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast" style="display:none;"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const imageInput = document.getElementById('imageInput');
|
||||
const platformInput = document.getElementById('platformInput');
|
||||
const downloadButton = document.getElementById('downloadButton');
|
||||
const progressContainer = document.getElementById('progressContainer');
|
||||
const totalProgressText = document.getElementById('totalProgressText');
|
||||
const imageProgressList = document.getElementById('imageProgressList');
|
||||
const getFileButton = document.getElementById('getFileButton');
|
||||
|
||||
let images = [];
|
||||
let currentTaskId = null;
|
||||
let websocket = null;
|
||||
|
||||
function parseImageList() {
|
||||
const text = imageInput.value.trim();
|
||||
if (!text) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return text.split('\n')
|
||||
.map(line => line.trim())
|
||||
.filter(line => line.length > 0);
|
||||
}
|
||||
|
||||
function startDownload() {
|
||||
images = parseImageList();
|
||||
|
||||
if (images.length === 0) {
|
||||
showToast('请至少输入一个镜像');
|
||||
return;
|
||||
}
|
||||
|
||||
const platform = platformInput.value.trim() || 'amd64';
|
||||
const requestData = {
|
||||
images: images,
|
||||
platform: platform
|
||||
};
|
||||
|
||||
fetch('/api/download', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(requestData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.taskId) {
|
||||
currentTaskId = data.taskId;
|
||||
showProgressUI();
|
||||
connectWebSocket(currentTaskId);
|
||||
|
||||
const totalCount = data.totalCount || images.length;
|
||||
totalProgressText.textContent = `0/${totalCount} - 0%`;
|
||||
} else {
|
||||
showToast('下载任务创建失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showToast('请求失败: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
function showProgressUI() {
|
||||
progressContainer.style.display = 'block';
|
||||
downloadButton.style.display = 'none';
|
||||
imageInput.disabled = true;
|
||||
platformInput.disabled = true;
|
||||
|
||||
const totalCount = images.length;
|
||||
totalProgressText.textContent = `0/${totalCount} - 0%`;
|
||||
|
||||
imageProgressList.innerHTML = '';
|
||||
images.forEach(image => {
|
||||
addImageProgressItem(image, 0);
|
||||
});
|
||||
}
|
||||
|
||||
function addImageProgressItem(image, progress) {
|
||||
const itemDiv = document.createElement('div');
|
||||
itemDiv.className = 'image-progress-item';
|
||||
itemDiv.id = `progress-${image.replace(/[\/\.:]/g, '_')}`;
|
||||
|
||||
const nameDiv = document.createElement('div');
|
||||
nameDiv.className = 'image-progress-name';
|
||||
nameDiv.title = image;
|
||||
nameDiv.textContent = image;
|
||||
|
||||
const barContainerDiv = document.createElement('div');
|
||||
barContainerDiv.className = 'image-progress-bar-container';
|
||||
|
||||
const barDiv = document.createElement('div');
|
||||
barDiv.className = 'image-progress-bar';
|
||||
barDiv.style.width = `${progress}%`;
|
||||
|
||||
const textDiv = document.createElement('div');
|
||||
textDiv.className = 'image-progress-text';
|
||||
textDiv.textContent = `${Math.round(progress)}%`;
|
||||
|
||||
barContainerDiv.appendChild(barDiv);
|
||||
itemDiv.appendChild(nameDiv);
|
||||
itemDiv.appendChild(barContainerDiv);
|
||||
itemDiv.appendChild(textDiv);
|
||||
|
||||
imageProgressList.appendChild(itemDiv);
|
||||
}
|
||||
|
||||
function updateImageProgress(image, progress, status) {
|
||||
const itemId = `progress-${image.replace(/[\/\.:]/g, '_')}`;
|
||||
const item = document.getElementById(itemId);
|
||||
|
||||
if (item) {
|
||||
const bar = item.querySelector('.image-progress-bar');
|
||||
const text = item.querySelector('.image-progress-text');
|
||||
|
||||
bar.style.width = `${progress}%`;
|
||||
text.textContent = `${Math.round(progress)}%`;
|
||||
|
||||
if (status === 'failed') {
|
||||
bar.style.backgroundColor = '#bd3c35';
|
||||
text.textContent = '失败';
|
||||
} else if (status === 'completed') {
|
||||
bar.style.backgroundColor = '#4CAF50';
|
||||
text.textContent = '完成';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function connectWebSocket(taskId) {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws/${taskId}`;
|
||||
|
||||
websocket = new WebSocket(wsUrl);
|
||||
|
||||
websocket.onopen = function() {
|
||||
console.log('ws');
|
||||
};
|
||||
|
||||
websocket.onmessage = function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
updateProgress(data);
|
||||
};
|
||||
|
||||
websocket.onerror = function(error) {
|
||||
console.error('WebSocket错误:', error);
|
||||
showToast('WebSocket连接错误');
|
||||
};
|
||||
|
||||
websocket.onclose = function() {
|
||||
console.log('WebSocket连接已关闭');
|
||||
};
|
||||
}
|
||||
|
||||
function updateProgress(data) {
|
||||
const progressPercent = data.totalCount > 0 ? (data.completedCount / data.totalCount) * 100 : 0;
|
||||
totalProgressText.textContent = `${data.completedCount}/${data.totalCount} - ${Math.round(progressPercent)}%`;
|
||||
|
||||
data.images.forEach(imgData => {
|
||||
updateImageProgress(imgData.image, imgData.progress, imgData.status);
|
||||
});
|
||||
|
||||
if (data.status === 'completed') {
|
||||
getFileButton.style.display = 'inline-block';
|
||||
|
||||
if (websocket) {
|
||||
websocket.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function downloadFile() {
|
||||
if (!currentTaskId) {
|
||||
showToast('没有可下载的文件');
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = `/api/files/${currentTaskId}_file`;
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = message;
|
||||
toast.style.display = 'block';
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
downloadButton.addEventListener('click', startDownload);
|
||||
getFileButton.addEventListener('click', downloadFile);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user