-
Notifications
You must be signed in to change notification settings - Fork 1
/
badge.html
103 lines (96 loc) · 4.26 KB
/
badge.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
<!--
* Badge Generator
* By Alex3236
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>徽章生成器</title>
<style>
body, html {
white-space: normal;
word-wrap: break-word;
word-break: break-all;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript">
const url = new URL(".", location.href).href;
const img = document.getElementById("preview");
function copy(btn, text) {
navigator.clipboard.writeText(text).then(
function() {
console.log(btn.value)
btn.value = "已复制！";
btn.disabled = true;
setTimeout(function() {
btn.value = "复制";
btn.disabled = false;
}, 1000);
},
function() {
alert("复制失败，请手动复制");
});
}
function update() {
code_markdown = document.getElementById("markdown");
code_html = document.getElementById("html");
preview = document.getElementById("preview");
text = document.BadgeInfo.Text.value;
color = document.BadgeInfo.Color.value;
logo_color = document.BadgeInfo.LogoColor.value;
icon = document.BadgeInfo.Icon.value;
style = document.BadgeInfo.Style.value;
badge_url = encodeURI("https://img.shields.io/badge/text-color?logo=Alipay&logoColor=white&style=style_text".replace("text", text).replace("color", color).replace("Alipay", icon).replace("style_text", style).replace("white", logo_color));
code_markdown.innerText = "[](url)".replace("text", text).replace("badge_url", badge_url).replace("url", url);
code_html.innerText = '<a href="url"><img src="badge_url" alt="text"></a>'.replace("text", text).replace("badge_url", badge_url).replace("url", url);
preview.innerHTML = code_html.innerText;
};
</script>
<h1>徽章生成器</h1>
<p>快速生成一个赞助按钮，可用于 Git 项目或个人网站。</p>
<form name="BadgeInfo">
<label>样式：</label>
<select onChange="update()" name="Icon">
<option value ="alipay">支付宝</option>
<option value ="wechat">微信</option>
<option value ="tencentqq">QQ</option>
</select>
<select onChange="update()" name="Style">
<option value="flat-square">扁平方块</option>
<option value="flat">扁平</option>
<option value="plastic">塑料</option>
<option value="for-the-badge">For the Badge</option>
</select>
<br>
<label>文字：</label>
<input oninput="update()" type="text" name="Text" value="Sponsor me!" required />
<br>
<label>Logo 颜色：</label>
<input oninput="update()" type="text" name="LogoColor" value="white" required />
<br>
<label>背景颜色：</label>
<input oninput="update()" type="text" name="Color" value="blue" required />
<p>* 颜色可以是一个十六进制代码，或者是以下之一：<code>brightgreen, green, yellowgreen, yellow, orange, red, blue, lightgrey, success, important, critical, informational, inactive, blueviolet, ff69b4, 9cf, 2ea44f</code></p>
</form>
<h2>代码</h2>
<h3>Markdown <input type="button" value="复制" onClick="copy(this, document.getElementById('markdown').innerText)"></h3>
<pre id="markdown"></pre>
<h3>HTML <input type="button" value="复制" onClick="copy(this, document.getElementById('html').innerText)"></h3>
<pre id="html"></pre>
<h2>预览</h2>
<code id="preview"></code>
<script>
if (!window.navigator.onLine || location.href.startsWith("file://")) {
document.body.innerHTML = "<p>网页处于离线状态，请先部署到网络再使用徽章生成器！</p>";
} else {
update();
}
</script>
</body>
</html>