-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocker-proxy-homepage.html
165 lines (153 loc) · 5.4 KB
/
docker-proxy-homepage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>镜像加速说明</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-image: url('https://raw.githubusercontent.com/a1phaaa/image/master/bg.jpg?token=GHSAT0AAAAAACS24CV7LSMQBLTHOT5OYR7SZTG2OCA');
/* Replace with your image path */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2em;
margin-bottom: 0.5em;
color: #007aff;
}
p {
margin-bottom: 1em;
}
pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
position: relative;
}
pre::before {
content: " ";
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 12px;
height: 12px;
background: #ff5f56;
border-radius: 50%;
box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
}
code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.875em;
}
.copy-button {
position: absolute;
top: 10px;
right: 10px;
background: #007aff;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
}
pre:hover .copy-button {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<center>
<h1>Docker镜像加速说明</h1>
</center>
<h2>配置加速地址</h2>
<p>创建或修改/etc/docker/daemon.json</p>
<pre><code>
sudo mkdir -p /etc/docker/daemon.json
sudo tee /etc/docker/daemon.json <<EOF
{
"registry-mirrors": ["https://docker.alphaa.top"]
}
EOF</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<pre><code>
sudo systemctl daemon-reload</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<pre><code>
sudo systemctl restart docker</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<h2>使用方法</h2>
<h3>配置daemon.json拉取镜像命令：</h3>
<pre><code>
docker pull library/alpine:latest</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<h3>不配置daemon.json拉取镜像命令：</h3>
<pre><code>
docker pull docker.alphaa.top/library/alpine:latest</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<center><a
href="https://raw.githubusercontent.com/a1phaaa/image/master/index.html?token=GHSAT0AAAAAACS24CV7YQ52AYI3V5FB3GEOZTG23NQ"
class="custom-button">代码获取</a> | <a href="https://qninq.cn/" class="custom-button">前端代码作者</a></center>
</div>
<script>
function copyCode(button) {
const code = button.previousSibling;
const textArea = document.createElement('textarea');
textArea.value = code.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
button.textContent = '已复制';
setTimeout(() => {
button.textContent = '复制代码';
}, 2000);
}
</script>
<style>
.custom-button {
display: inline-block;
padding: 10px 20px;
background-color: #90EE90;
/* 浅绿色 */
color: #FFFFFF;
/* 纯白色 */
text-align: center;
text-decoration: none;
border-radius: 5px;
/* 微小圆角 */
font-size: 16px;
font-weight: bold;
/* 粗体 */
border: 2px solid;
/* 边框 */
border-image: linear-gradient(to right, #b8c6db, #f5f7fa) 1;
/* 金属质感边框 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* 阴影 */
cursor: pointer;
transition: background-color 0.3s;
}
.custom-button:hover {
background-color: #76c776;
/* 鼠标悬停时稍微变深的浅绿色 */
}
</style>
</body>
</html>