Skip to content

Commit 3ba26b3

Browse files
Rene8028Rene8028
committed
初次提交
0 parents  commit 3ba26b3

File tree

15 files changed

+1309
-0
lines changed

15 files changed

+1309
-0
lines changed

‎LICENSE

Lines changed: 674 additions & 0 deletions
Large diffs are not rendered by default.

‎README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Pay
2+
3+
一个简单的收款码展示页。
4+
5+
部署在个人博客中
6+
7+
#### 修改自https://github.com/alex3236/pay
8+
9+
### 修改内容
10+
11+
- 修改了二维码生成，不使用url生成二维码，而是使用已有的二维码图片
12+
- 修改了样式，添加了卡片样式
13+
- 修改了一些文字部分
14+
- 彻底去掉了QQ支付方式
15+
16+
### 特点
17+
18+
- 纯前端实现，一键免服务器部署，无需安装，无需数据库；
19+
- 免维护，无多余的配置，一次修改配置即可永久使用。
20+
- 智能识别客户端匹配二维码，无需手动选择
21+
22+
### 生成徽章
23+
24+
你可以在网页底部找到一个非常简（垃）洁（圾）的徽章生成器。
25+
26+
### 大二维码
27+
28+
29+
点击二维码图标即可打开大二维码，你可以将其直接发送给他人扫描。
30+
31+
32+
### :warning: 注意
33+
- 请用专门的代码编辑器（如 `Notepad2` / `VS Code`）编辑代码，切忌用记事本编辑，否则可能出现中文乱码！
34+
- 自 https://github.com/alex3236/pay 的 [65f6e3f](https://github.com/alex3236/pay/commit/65f6e3f74e26e766b611b2d36f42d6841ad5d806) 起，项目的仓库使用 [GNU GPLv3](https://www.gnu.org/licenses/gpl-3.0.html) 许可协议。本人修改仅做自用，无任何商业行为，请勿以任何形式出售此源码。

‎alipay.png

144 KB
Loading

‎badge.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!--
2+
* Badge Generator
3+
* By Alex3236
4+
-->
5+
<!DOCTYPE html>
6+
<html lang="zh-CN">
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<title>徽章生成器</title>
12+
<style>
13+
body, html {
14+
white-space: normal;
15+
word-wrap: break-word;
16+
word-break: break-all;
17+
font-family: Helvetica, Arial, sans-serif;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<script type="text/javascript">
24+
const url = new URL(".", location.href).href;
25+
const img = document.getElementById("preview");
26+
27+
function copy(btn, text) {
28+
navigator.clipboard.writeText(text).then(
29+
function() {
30+
console.log(btn.value)
31+
btn.value = "已复制！";
32+
btn.disabled = true;
33+
setTimeout(function() {
34+
btn.value = "复制";
35+
btn.disabled = false;
36+
}, 1000);
37+
},
38+
function() {
39+
alert("复制失败，请手动复制");
40+
});
41+
}
42+
43+
function update() {
44+
code_markdown = document.getElementById("markdown");
45+
code_html = document.getElementById("html");
46+
preview = document.getElementById("preview");
47+
48+
text = document.BadgeInfo.Text.value;
49+
color = document.BadgeInfo.Color.value;
50+
logo_color = document.BadgeInfo.LogoColor.value;
51+
icon = document.BadgeInfo.Icon.value;
52+
style = document.BadgeInfo.Style.value;
53+
54+
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));
55+
56+
code_markdown.innerText = "[![text](badge_url)](url)".replace("text", text).replace("badge_url", badge_url).replace("url", url);
57+
code_html.innerText = '<a href="url"><img src="badge_url" alt="text"></a>'.replace("text", text).replace("badge_url", badge_url).replace("url", url);
58+
preview.innerHTML = code_html.innerText;
59+
};
60+
</script>
61+
<h1>徽章生成器</h1>
62+
<p>快速生成一个赞助按钮，可用于 Git 项目或个人网站。</p>
63+
<form name="BadgeInfo">
64+
<label>样式：</label>
65+
<select onChange="update()" name="Icon">
66+
<option value ="alipay">支付宝</option>
67+
<option value ="wechat">微信</option>
68+
<option value ="tencentqq">QQ</option>
69+
</select>
70+
<select onChange="update()" name="Style">
71+
<option value="flat-square">扁平方块</option>
72+
<option value="flat">扁平</option>
73+
<option value="plastic">塑料</option>
74+
<option value="for-the-badge">For the Badge</option>
75+
</select>
76+
77+
<br>
78+
<label>文字：</label>
79+
<input oninput="update()" type="text" name="Text" value="Sponsor me!" required />
80+
<br>
81+
<label>Logo 颜色：</label>
82+
<input oninput="update()" type="text" name="LogoColor" value="white" required />
83+
<br>
84+
<label>背景颜色：</label>
85+
<input oninput="update()" type="text" name="Color" value="blue" required />
86+
<p>* 颜色可以是一个十六进制代码，或者是以下之一：<code>brightgreen, green, yellowgreen, yellow, orange, red, blue, lightgrey, success, important, critical, informational, inactive, blueviolet, ff69b4, 9cf, 2ea44f</code></p>
87+
</form>
88+
<h2>代码</h2>
89+
<h3>Markdown <input type="button" value="复制" onClick="copy(this, document.getElementById('markdown').innerText)"></h3>
90+
<pre id="markdown"></pre>
91+
<h3>HTML <input type="button" value="复制" onClick="copy(this, document.getElementById('html').innerText)"></h3>
92+
<pre id="html"></pre>
93+
<h2>预览</h2>
94+
<code id="preview"></code>
95+
<script>
96+
if (!window.navigator.onLine || location.href.startsWith("file://")) {
97+
document.body.innerHTML = "<p>网页处于离线状态，请先部署到网络再使用徽章生成器！</p>";
98+
} else {
99+
update();
100+
}
101+
</script>
102+
</body>
103+
</html>

‎css/font.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@font-face {
2+
font-family: 'icons';
3+
src: url('../fonts/icons.eot?185fbz');
4+
src: url('../fonts/icons.eot?185fbz#iefix') format('embedded-opentype'), url('../fonts/icons.ttf?185fbz') format('truetype'), url('../fonts/icons.woff?185fbz') format('woff'), url('../fonts/icons.svg?185fbz#icons') format('svg');
5+
font-weight: normal;
6+
font-style: normal;
7+
font-display: block;
8+
}
9+
10+
i {
11+
/* use !important to prevent issues with browser extensions that change fonts */
12+
font-family: 'icons' !important;
13+
speak: never;
14+
font-style: normal;
15+
font-weight: normal;
16+
font-variant: normal;
17+
text-transform: none;
18+
line-height: 1;
19+
/* Better Font Rendering =========== */
20+
-webkit-font-smoothing: antialiased;
21+
-moz-osx-font-smoothing: grayscale;
22+
}
23+
24+
.icon-qr:before {
25+
content: "\e900";
26+
}
27+
28+
.icon-alipay:before {
29+
content: "\e901";
30+
}
31+
32+
.icon-qq:before {
33+
content: "\f1d6";
34+
}
35+
36+
.icon-wechat:before {
37+
content: "\f1d7";
38+
}

‎css/fullqr.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
body {
2+
background-color: lightblue;
3+
}
4+
5+
.code-item {
6+
/* margin-top: 10%; */
7+
/* height: 100%; */
8+
background: #5c92ef;
9+
border: 1px solid #e5e5e5;
10+
}
11+
12+
.container.main {
13+
width: 380px;
14+
/* height: 35%; */
15+
position: absolute;
16+
left: 50%;
17+
top: 50%;
18+
transform: translate(-50%, -50%);
19+
}
20+
21+
.icon-group,
22+
.code-text {
23+
/* margin: 10px; */
24+
margin: 0;
25+
padding: 0;
26+
background-color: #f2f2f2;
27+
}
28+
29+
.icon-group {
30+
font-size: 2.5em;
31+
line-height: 2.5em;
32+
}
33+
34+
.icon-group i {
35+
padding: 15px;
36+
}
37+
38+
.icon-alipay::before {
39+
color: #00aaee;
40+
}
41+
42+
.icon-wechat::before {
43+
color: #00cd0d;
44+
}
45+
46+
.icon-qq::before {
47+
color: #df1f1f
48+
}
49+
50+
.code-text {
51+
line-height: 3em;
52+
font-size: 1.5em;
53+
margin: 3px;
54+
}
55+
56+
.qrcode img {
57+
display: inline-block;
58+
border: 10px solid #fff;
59+
margin: 10%;
60+
}
61+
62+
html,
63+
body {
64+
height: 100%;
65+
background-size: cover;
66+
background-repeat: no-repeat;
67+
background-position: center;
68+
}
69+
70+
.hidden {
71+
display: none;
72+
}
73+
74+
img {
75+
max-width: 200px;
76+
}

‎css/main.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
html,
2+
body {
3+
height: 100%;
4+
background-size: cover;
5+
background-repeat: no-repeat;
6+
background-position: center;
7+
}
8+
9+
.hidden {
10+
display: none;
11+
}
12+
13+
.jumbotron.my-auto {
14+
max-width: 450px;
15+
background-color: rgba(255, 255, 255, 0.65);
16+
padding: 35px 35px 25px 35px;
17+
border-radius: 1.2rem;
18+
}
19+
20+
.container {
21+
/* height: 100%;
22+
display: flex; */
23+
max-width: 960px;
24+
}
25+
26+
.pricing-header {
27+
max-width: 700px;
28+
}
29+
30+
div.btn-group {
31+
margin: 0 auto;
32+
text-align: center;
33+
width: inherit;
34+
}
35+
36+
img {
37+
max-width: 120px;
38+
}
39+
40+
span.app-name {
41+
padding: 0px;
42+
}
43+
44+
i {
45+
padding-right: 5px;
46+
}
47+
48+
.very-small {
49+
font-size: 0.8em;
50+
color: rgb(199, 199, 199);
51+
margin: 0;
52+
}
53+
54+
.pd0 {
55+
padding-right: 0 !important;
56+
}
57+
58+
a:link {
59+
text-decoration: none;
60+
}
61+
62+
a:hover {
63+
text-decoration: underline lightblue;
64+
}

‎fonts/icons.eot

2.24 KB
Binary file not shown.

‎fonts/icons.svg

Lines changed: 14 additions & 0 deletions
Loading

‎fonts/icons.ttf

2.08 KB
Binary file not shown.

0 commit comments

Comments
 (0)