Skip to content

Commit dfe1349

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

File tree

1 file changed

+169
-159
lines changed

1 file changed

+169
-159
lines changed

‎index.html

+169-159
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,188 @@
11
<!DOCTYPE html>
2-
<html lang="zh-CN">
2+
<html>
33
<head>
4-
<link rel="shortcut icon" href="https://mirror.ghproxy.com/raw.githubusercontent.com/0-RTT/ghproxy/main/favicon.ico">
54
<meta charset="UTF-8">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
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');
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>
1214

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>
102-
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>
15+
<style>
16+
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
10817

109-
<div id="content" class="content"></div>
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+
}
11030

111-
<script>
112-
function showContent(service) {
113-
const contentDiv = document.getElementById('content');
114-
let content = '';
31+
/* 全局样式 */
32+
body {
33+
background: var(--primary-bg-color);
34+
font-family: var(--font-family-base);
35+
}
11536

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>
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+
}
12347

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+
}
12456

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
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+
}
13070

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"]
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);
14075
}
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-
}
15076

151-
contentDiv.innerHTML = content;
152-
contentDiv.style.display = 'block'; // 显示内容
153-
}
77+
.el-upload, .el-upload-dragger {
78+
width: 100%;
79+
}
15480

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);
167-
}
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+
}
16895

169-
// 默认展示 GitHub 的内容
170-
showContent('github');
171-
</script>
96+
/* 隐藏带有v-cloak属性的元素 */
97+
[v-cloak] {
98+
display: none;
99+
}
172100

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>
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>
176126

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);
183+
}
184+
},
185+
});
186+
</script>
177187
</body>
178188
</html>

0 commit comments

Comments
 (0)