Skip to content

Commit 61541bc

Browse files
0-RTT0-RTT
authored
Update index.html
1 parent 7db90ff commit 61541bc

File tree

1 file changed

+159
-169
lines changed

1 file changed

+159
-169
lines changed

‎index.html

+159-169
Original file line numberDiff line numberDiff line change
@@ -1,188 +1,178 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="zh-CN">
33
<head>
4+
<link rel="shortcut icon" href="https://mirror.ghproxy.com/raw.githubusercontent.com/0-RTT/ghproxy/main/favicon.ico">
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
6-
<meta name="description" content="高效稳定的图床服务，支持大于5MB图片上传，基于Telegraph的图床解决方案。">
7-
<meta name="keywords" content="图床, Telegra.ph, 图片上传, 高效, 稳定, 大文件支持">
8-
<title>JIASU.IN-基于Telegraph的图床服务</title>
9-
<link rel="icon" href="/favicon.ico" type="image/x-icon">
10-
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css">
11-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
12-
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.min.js"></script>
13-
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
7+
<meta name="description" content="DockerHub代理加速,Github代理加速, ">
8+
<meta name="keywords" content="Github代理加速, DockerHub代理加速, dockerhub镜像, JIASU.IN">
9+
<title>JIASU.IN-公益加速服务</title>
10+
<style>
11+
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
1412

15-
<style>
16-
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
17-
18-
:root {
19-
--primary-bg-color: #f1f1f1;
20-
--box-shadow-color: rgba(0,0,0,0.1);
21-
--text-shadow-color: rgba(0,0,0,0.3);
22-
--button-bg-color: #f8f9fa;
23-
--button-border-color: #dcdfe6;
24-
--button-selected-bg-color: #6772e5;
25-
--text-color: #6e7687;
26-
--button-text-color: #fff;
27-
--font-family-base: Arial, sans-serif;
28-
--font-family-title: 'Long Cang', cursive;
29-
}
30-
31-
/* 全局样式 */
32-
body {
33-
background: var(--primary-bg-color);
34-
font-family: var(--font-family-base);
35-
}
13+
body {
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
15+
line-height: 1.5;
16+
color: #000;
17+
margin: 0;
18+
padding: 30px;
19+
text-align: center;
20+
}
21+
h1 {
22+
font-family: "Long Cang", cursive;
23+
font-weight: 400;
24+
font-style: normal;
25+
font-size: 2em; /* 调整字体大小 */
26+
text-align: center;
27+
margin-top: 2px; /* 调整距离顶部的距离 */
28+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
29+
}
30+
.button-container {
31+
display: flex; /* 使用 Flexbox */
32+
justify-content: center; /* 居中对齐 */
33+
flex-wrap: nowrap; /* 不换行 */
34+
margin-top: 20px; /* 添加顶部间距 */
35+
}
36+
.domain {
37+
display: inline-block;
38+
margin: 0 10px; /* 调整按钮之间的间距 */
39+
padding: 10px 20px;
40+
background: linear-gradient(90deg, #4e8cff, #007aff); /* 渐变背景 */
41+
color: white;
42+
border-radius: 8px; /* 圆角 */
43+
cursor: pointer;
44+
transition: background 0.3s, transform 0.2s; /* 平滑过渡 */
45+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 更明显的阴影 */
46+
}
47+
.domain:hover {
48+
background: linear-gradient(90deg, #007aff, #005bb5); /* 悬停时的渐变背景 */
49+
transform: translateY(-2px); /* 悬停时轻微抬起 */
50+
}
51+
.content {
52+
margin-top: 30px;
53+
display: none; /* 初始隐藏内容 */
54+
text-align: left;
55+
max-width: 600px;
56+
margin: 0 auto;
57+
}
58+
pre {
59+
background: #2d2d2d;
60+
color: #f8f8f2;
61+
padding: 20px;
62+
border-radius: 5px;
63+
overflow-x: auto;
64+
position: relative;
65+
width: 100%; /* 设置宽度为100% */
66+
box-sizing: border-box; /* 包含内边距和边框 */
67+
max-width: 100%; /* 确保不超过容器宽度 */
68+
margin: 20px 0; /* 增加上下间距 */
69+
}
70+
code {
71+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
72+
font-size: 0.875em;
73+
}
74+
.copy-button {
75+
position: absolute;
76+
top: 10px;
77+
right: 10px;
78+
background: #28a745; /* 绿色背景 */
79+
color: white;
80+
border: none;
81+
padding: 5px 10px;
82+
border-radius: 5px;
83+
cursor: pointer;
84+
opacity: 0;
85+
transition: opacity 0.3s, background 0.3s; /* 平滑过渡 */
86+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 更明显的阴影 */
87+
}
88+
.copy-button:hover {
89+
background: #218838; /* 悬停时的深绿色 */
90+
}
91+
pre:hover .copy-button {
92+
opacity: 1; /* 悬停时显示按钮 */
93+
}
94+
footer {
95+
margin-top: 20px; /* 添加顶部间距 */
96+
font-size: 0.9em; /* 调整字体大小 */
97+
color: #555; /* 设置字体颜色 */
98+
}
99+
</style>
100+
</head>
101+
<body>
36102

37-
.h2 {
38-
font-size: 35px;
39-
font-weight: 400;
40-
text-align: center;
41-
line-height: 100px;
42-
margin-bottom: 10px;
43-
font-family: var(--font-family-title);
44-
text-shadow: 2px 2px 4px var(--text-shadow-color);
45-
padding-top: 1px;
46-
}
103+
<h1>JIASU.IN</h1>
104+
<div class="button-container">
105+
<div class="domain" onclick="showContent('github')">Github Proxy</div>
106+
<div class="domain" onclick="showContent('docker')">DockerHub Proxy</div>
107+
</div>
47108

48-
.container {
49-
box-sizing: border-box;
50-
margin: 30px auto 0;
51-
background: #fff;
52-
border-radius: 10px;
53-
box-shadow: 0 0 8px var(--box-shadow-color);
54-
padding: 0 30px 10px;
55-
}
109+
<div id="content" class="content"></div>
56110

57-
.output-types button {
58-
display: inline-block;
59-
background-color: var(--button-bg-color);
60-
border: 1px solid var(--button-border-color);
61-
border-radius: 4px;
62-
color: var(--text-color);
63-
cursor: pointer;
64-
font-size: 14px;
65-
margin: 0 10px 0 2px;
66-
padding: 8px 12px;
67-
transition: all 0.2s ease-in-out;
68-
box-shadow: 0 4px 8px var(--box-shadow-color);
69-
}
111+
<script>
112+
function showContent(service) {
113+
const contentDiv = document.getElementById('content');
114+
let content = '';
70115

71-
.output-types button.selected {
72-
background-color: var(--button-selected-bg-color);
73-
color: var(--button-text-color);
74-
border-color: var(--button-selected-bg-color);
75-
}
116+
if (service === 'github') {
117+
content = `
118+
<h3>示例：</h3>
119+
<pre><code>https://gh.jiasu.in/https://github.com/0-RTT/telegraph/blob/main/worker.js
120+
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
121+
<pre><code>https://gh.jiasu.in/raw.githubusercontent.com/0-RTT/telegraph/main/worker.js
122+
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
76123
77-
.el-upload, .el-upload-dragger {
78-
width: 100%;
79-
}
80124
81-
.output-link textarea {
82-
background-color: var(--button-bg-color);
83-
border: none;
84-
height: 80px;
85-
border-radius: 4px;
86-
color: var(--text-color);
87-
font-size: 14px;
88-
margin: 10px 2px;
89-
padding: 12px;
90-
resize: none;
91-
width: 100%;
92-
box-sizing: border-box;
93-
display: block;
94-
}
125+
<h3>git clone：</h3>
126+
<pre><code>git clone https://gh.jiasu.in/https://github.com/0-RTT/telegraph
127+
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
128+
<h3>wget & curl：</h3>
129+
<pre><code>wget https://gh.jiasu.in/https://github.com/0-RTT/telegraph/blob/main/worker.js
95130
96-
/* 隐藏带有v-cloak属性的元素 */
97-
[v-cloak] {
98-
display: none;
131+
curl -O https://gh.jiasu.in/https://raw.githubusercontent.com/0-RTT/telegraph/main/worker.js
132+
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
133+
`;
134+
} else if (service === 'docker') {
135+
content = `
136+
<h3>设置 registry mirror</h3>
137+
<pre><code>sudo tee /etc/docker/daemon.json &lt;&lt;EOF
138+
{
139+
"registry-mirrors": ["https://dh.jiasu.in"]
99140
}
141+
EOF</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
142+
<h3>重载 Docker 服务</h3>
143+
<pre><code>sudo systemctl daemon-reload && sudo systemctl restart docker
144+
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
145+
<h3>拉取镜像</h3>
146+
<pre><code>docker pull library/alpine:latest
147+
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
148+
`;
149+
}
100150

101-
</style>
102-
103-
</head>
104-
<body>
105-
<div id="app" v-cloak>
106-
<div class="container">
107-
<p class="h2">JIASU.IN</p>
108-
<div class="button-group">
109-
<el-upload class="output-link" :action="uploadAction" :auto-upload="true" drag :on-success="handleSuccess" :on-error="handleError">
110-
<i class="el-icon-upload"></i>
111-
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
112-
</el-upload>
113-
<br>
114-
<div class="output-types">
115-
<button v-for="type in outputTypes" :key="type.key" @click="selectLinkType(type)" :class="{ 'selected': currentOutputType === type.key }">{{ type.title }}</button>
116-
<div class="output-link">
117-
<textarea class="form-control" id="output" v-model="result" rows="8" readonly></textarea>
118-
</div>
119-
</div>
120-
</div>
121-
<p style="font-size: 14px; text-align: center;">
122-
项目开源于 GitHub - <a href="https://github.com/0-RTT/telegraph" target="_blank" rel="noopener noreferrer">0-RTT/telegraph</a>
123-
</p>
124-
</div>
125-
</div>
151+
contentDiv.innerHTML = content;
152+
contentDiv.style.display = 'block'; // 显示内容
153+
}
126154

127-
<script>
128-
new Vue({
129-
el: "#app",
130-
data() {
131-
return {
132-
selectedApi: "api",
133-
url: '',
134-
outputTypes: [
135-
{ title: 'URL', key: 'URL', template: '#url#' },
136-
{ title: 'Markdown', key: 'Markdown', template: '![image](#url#)' },
137-
{ title: 'BBCode', key: 'BBCode', template: '[img]#url#[/img]' }
138-
],
139-
currentOutputType: 'URL',
140-
};
141-
},
142-
computed: {
143-
uploadAction() {
144-
return `./api/${this.selectedApi}.php`;
145-
},
146-
result() {
147-
if (!this.url) return '';
148-
const template = this.outputTypes.find(type => type.key === this.currentOutputType)?.template;
149-
return template.replace('#url#', this.url);
150-
},
151-
},
152-
methods: {
153-
async handleSuccess(response) {
154-
if (response.status === "success") {
155-
this.url = response.data;
156-
await this.delayMessage("上传成功", 200, true);
157-
} else {
158-
await this.handleError(response);
159-
}
160-
},
161-
async handleError(response) {
162-
console.error("上传失败", response.message);
163-
this.url = '';
164-
await this.delayMessage(`上传失败：${response.message}`, 100, false);
165-
},
166-
async selectLinkType(type) {
167-
this.currentOutputType = type.key;
168-
await this.copy();
169-
},
170-
async copy() {
171-
if (!this.url) return;
172-
try {
173-
await navigator.clipboard.writeText(this.result);
174-
this.$message.success("链接已复制到剪贴板");
175-
} catch (err) {
176-
console.error('复制失败', err);
177-
this.$message.error("复制到剪贴板失败");
178-
}
179-
},
180-
async delayMessage(message, delay, isSuccess) {
181-
await new Promise(resolve => setTimeout(resolve, delay));
182-
isSuccess ? this.$message.success(message) : this.$message.error(message);
155+
function copyCode(button) {
156+
const code = button.previousSibling;
157+
const textArea = document.createElement('textarea');
158+
textArea.value = code.textContent;
159+
document.body.appendChild(textArea);
160+
textArea.select();
161+
document.execCommand('copy');
162+
document.body.removeChild(textArea);
163+
button.textContent = '已复制';
164+
setTimeout(() => {
165+
button.textContent = '复制代码';
166+
}, 2000);
183167
}
184-
},
185-
});
168+
169+
// 默认展示 GitHub 的内容
170+
showContent('github');
186171
</script>
172+
173+
<footer>
174+
项目开源于 GitHub - <a href="https://github.com/0-RTT/ghproxy-go" target="_blank" rel="noopener noreferrer">0-RTT/ghproxy-go</a>
175+
</footer>
176+
187177
</body>
188178
</html>

0 commit comments

Comments
 (0)