Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@0-RTT
0-RTT authored Aug 18, 2024
1 parent 61541bc commit dfe1349
Showing 1 changed file with 169 additions and 159 deletions.
328 changes: 169 additions & 159 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,188 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html>
<head>
<link rel="shortcut icon" href="https://mirror.ghproxy.com/raw.githubusercontent.com/0-RTT/ghproxy/main/favicon.ico">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
<meta name="description" content="DockerHub代理加速,Github代理加速, ">
<meta name="keywords" content="Github代理加速, DockerHub代理加速, dockerhub镜像, JIASU.IN">
<title>JIASU.IN-公益加速服务</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
<meta name="description" content="高效稳定的图床服务，支持大于5MB图片上传，基于Telegraph的图床解决方案。">
<meta name="keywords" content="图床, Telegra.ph, 图片上传, 高效, 稳定, 大文件支持">
<title>JIASU.IN-基于Telegraph的图床服务</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
color: #000;
margin: 0;
padding: 30px;
text-align: center;
}
h1 {
font-family: "Long Cang", cursive;
font-weight: 400;
font-style: normal;
font-size: 2em; /* 调整字体大小 */
text-align: center;
margin-top: 2px; /* 调整距离顶部的距离 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
}
.button-container {
display: flex; /* 使用 Flexbox */
justify-content: center; /* 居中对齐 */
flex-wrap: nowrap; /* 不换行 */
margin-top: 20px; /* 添加顶部间距 */
}
.domain {
display: inline-block;
margin: 0 10px; /* 调整按钮之间的间距 */
padding: 10px 20px;
background: linear-gradient(90deg, #4e8cff, #007aff); /* 渐变背景 */
color: white;
border-radius: 8px; /* 圆角 */
cursor: pointer;
transition: background 0.3s, transform 0.2s; /* 平滑过渡 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 更明显的阴影 */
}
.domain:hover {
background: linear-gradient(90deg, #007aff, #005bb5); /* 悬停时的渐变背景 */
transform: translateY(-2px); /* 悬停时轻微抬起 */
}
.content {
margin-top: 30px;
display: none; /* 初始隐藏内容 */
text-align: left;
max-width: 600px;
margin: 0 auto;
}
pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 5px;
overflow-x: auto;
position: relative;
width: 100%; /* 设置宽度为100% */
box-sizing: border-box; /* 包含内边距和边框 */
max-width: 100%; /* 确保不超过容器宽度 */
margin: 20px 0; /* 增加上下间距 */
}
code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.875em;
}
.copy-button {
position: absolute;
top: 10px;
right: 10px;
background: #28a745; /* 绿色背景 */
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s, background 0.3s; /* 平滑过渡 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 更明显的阴影 */
}
.copy-button:hover {
background: #218838; /* 悬停时的深绿色 */
}
pre:hover .copy-button {
opacity: 1; /* 悬停时显示按钮 */
}
footer {
margin-top: 20px; /* 添加顶部间距 */
font-size: 0.9em; /* 调整字体大小 */
color: #555; /* 设置字体颜色 */
}
</style>
</head>
<body>

<h1>JIASU.IN</h1>
<div class="button-container">
<div class="domain" onclick="showContent('github')">Github Proxy</div>
<div class="domain" onclick="showContent('docker')">DockerHub Proxy</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');

<div id="content" class="content"></div>
:root {
--primary-bg-color: #f1f1f1;
--box-shadow-color: rgba(0,0,0,0.1);
--text-shadow-color: rgba(0,0,0,0.3);
--button-bg-color: #f8f9fa;
--button-border-color: #dcdfe6;
--button-selected-bg-color: #6772e5;
--text-color: #6e7687;
--button-text-color: #fff;
--font-family-base: Arial, sans-serif;
--font-family-title: 'Long Cang', cursive;
}

<script>
function showContent(service) {
const contentDiv = document.getElementById('content');
let content = '';
/* 全局样式 */
body {
background: var(--primary-bg-color);
font-family: var(--font-family-base);
}

if (service === 'github') {
content = `
<h3>示例：</h3>
<pre><code>https://gh.jiasu.in/https://github.com/0-RTT/telegraph/blob/main/worker.js
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<pre><code>https://gh.jiasu.in/raw.githubusercontent.com/0-RTT/telegraph/main/worker.js
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
.h2 {
font-size: 35px;
font-weight: 400;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
font-family: var(--font-family-title);
text-shadow: 2px 2px 4px var(--text-shadow-color);
padding-top: 1px;
}

.container {
box-sizing: border-box;
margin: 30px auto 0;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 8px var(--box-shadow-color);
padding: 0 30px 10px;
}

<h3>git clone：</h3>
<pre><code>git clone https://gh.jiasu.in/https://github.com/0-RTT/telegraph
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<h3>wget & curl：</h3>
<pre><code>wget https://gh.jiasu.in/https://github.com/0-RTT/telegraph/blob/main/worker.js
.output-types button {
display: inline-block;
background-color: var(--button-bg-color);
border: 1px solid var(--button-border-color);
border-radius: 4px;
color: var(--text-color);
cursor: pointer;
font-size: 14px;
margin: 0 10px 0 2px;
padding: 8px 12px;
transition: all 0.2s ease-in-out;
box-shadow: 0 4px 8px var(--box-shadow-color);
}

curl -O https://gh.jiasu.in/https://raw.githubusercontent.com/0-RTT/telegraph/main/worker.js
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
`;
} else if (service === 'docker') {
content = `
<h3>设置 registry mirror</h3>
<pre><code>sudo tee /etc/docker/daemon.json &lt;&lt;EOF
{
"registry-mirrors": ["https://dh.jiasu.in"]
.output-types button.selected {
background-color: var(--button-selected-bg-color);
color: var(--button-text-color);
border-color: var(--button-selected-bg-color);
}
EOF</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<h3>重载 Docker 服务</h3>
<pre><code>sudo systemctl daemon-reload && sudo systemctl restart docker
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
<h3>拉取镜像</h3>
<pre><code>docker pull library/alpine:latest
</code><button class="copy-button" onclick="copyCode(this)">复制代码</button></pre>
`;
}

contentDiv.innerHTML = content;
contentDiv.style.display = 'block'; // 显示内容
}
.el-upload, .el-upload-dragger {
width: 100%;
}

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);
}
.output-link textarea {
background-color: var(--button-bg-color);
border: none;
height: 80px;
border-radius: 4px;
color: var(--text-color);
font-size: 14px;
margin: 10px 2px;
padding: 12px;
resize: none;
width: 100%;
box-sizing: border-box;
display: block;
}

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

<footer>
项目开源于 GitHub - <a href="https://github.com/0-RTT/ghproxy-go" target="_blank" rel="noopener noreferrer">0-RTT/ghproxy-go</a>
</footer>
</style>

</head>
<body>
<div id="app" v-cloak>
<div class="container">
<p class="h2">JIASU.IN</p>
<div class="button-group">
<el-upload class="output-link" :action="uploadAction" :auto-upload="true" drag :on-success="handleSuccess" :on-error="handleError">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<br>
<div class="output-types">
<button v-for="type in outputTypes" :key="type.key" @click="selectLinkType(type)" :class="{ 'selected': currentOutputType === type.key }">{{ type.title }}</button>
<div class="output-link">
<textarea class="form-control" id="output" v-model="result" rows="8" readonly></textarea>
</div>
</div>
</div>
<p style="font-size: 14px; text-align: center;">
项目开源于 GitHub - <a href="https://github.com/0-RTT/telegraph" target="_blank" rel="noopener noreferrer">0-RTT/telegraph</a>
</p>
</div>
</div>

<script>
new Vue({
el: "#app",
data() {
return {
selectedApi: "api",
url: '',
outputTypes: [
{ title: 'URL', key: 'URL', template: '#url#' },
{ title: 'Markdown', key: 'Markdown', template: '![image](#url#)' },
{ title: 'BBCode', key: 'BBCode', template: '[img]#url#[/img]' }
],
currentOutputType: 'URL',
};
},
computed: {
uploadAction() {
return `./api/${this.selectedApi}.php`;
},
result() {
if (!this.url) return '';
const template = this.outputTypes.find(type => type.key === this.currentOutputType)?.template;
return template.replace('#url#', this.url);
},
},
methods: {
async handleSuccess(response) {
if (response.status === "success") {
this.url = response.data;
await this.delayMessage("上传成功", 200, true);
} else {
await this.handleError(response);
}
},
async handleError(response) {
console.error("上传失败", response.message);
this.url = '';
await this.delayMessage(`上传失败：${response.message}`, 100, false);
},
async selectLinkType(type) {
this.currentOutputType = type.key;
await this.copy();
},
async copy() {
if (!this.url) return;
try {
await navigator.clipboard.writeText(this.result);
this.$message.success("链接已复制到剪贴板");
} catch (err) {
console.error('复制失败', err);
this.$message.error("复制到剪贴板失败");
}
},
async delayMessage(message, delay, isSuccess) {
await new Promise(resolve => setTimeout(resolve, delay));
isSuccess ? this.$message.success(message) : this.$message.error(message);
}
},
});
</script>
</body>
</html>

0 comments on commit dfe1349

Please sign in to comment.