初次提交

Shiroko3 · Aug 5, 2023 · 3ba26b3 · 3ba26b3
commit 3ba26b3
Show file tree

Hide file tree

Showing 15 changed files with 1,309 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1,34 @@
+# Pay
+
+一个简单的收款码展示页。
+
+部署在个人博客中
+
+#### 修改自https://github.com/alex3236/pay
+
+### 修改内容
+
+- 修改了二维码生成，不使用url生成二维码，而是使用已有的二维码图片
+- 修改了样式，添加了卡片样式
+- 修改了一些文字部分
+- 彻底去掉了QQ支付方式
+
+### 特点
+
+- 纯前端实现，一键免服务器部署，无需安装，无需数据库；
+- 免维护，无多余的配置，一次修改配置即可永久使用。
+- 智能识别客户端匹配二维码，无需手动选择
+
+### 生成徽章
+
+你可以在网页底部找到一个非常简（垃）洁（圾）的徽章生成器。
+
+### 大二维码
+
+
+点击二维码图标即可打开大二维码，你可以将其直接发送给他人扫描。
+
+
+### :warning: 注意
+- 请用专门的代码编辑器（如 `Notepad2` / `VS Code`）编辑代码，切忌用记事本编辑，否则可能出现中文乱码！
+- 自 https://github.com/alex3236/pay 的 [65f6e3f](https://github.com/alex3236/pay/commit/65f6e3f74e26e766b611b2d36f42d6841ad5d806) 起，项目的仓库使用 [GNU GPLv3](https://www.gnu.org/licenses/gpl-3.0.html) 许可协议。本人修改仅做自用，无任何商业行为，请勿以任何形式出售此源码。
diff --git a/alipay.png b/alipay.png
diff --git a/badge.html b/badge.html
@@ -0,0 +1,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 = "[![text](badge_url)](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>
diff --git a/css/font.css b/css/font.css
@@ -0,0 +1,38 @@
+@font-face {
+    font-family: 'icons';
+    src: url('../fonts/icons.eot?185fbz');
+    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');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+}
+
+i {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icons' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-qr:before {
+    content: "\e900";
+}
+
+.icon-alipay:before {
+    content: "\e901";
+}
+
+.icon-qq:before {
+    content: "\f1d6";
+}
+
+.icon-wechat:before {
+    content: "\f1d7";
+}
diff --git a/css/fullqr.css b/css/fullqr.css
@@ -0,0 +1,76 @@
+body {
+    background-color: lightblue;
+}
+
+.code-item {
+    /* margin-top: 10%; */
+    /* height: 100%; */
+    background: #5c92ef;
+    border: 1px solid #e5e5e5;
+}
+
+.container.main {
+    width: 380px;
+    /* height: 35%; */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.icon-group,
+.code-text {
+    /* margin: 10px; */
+    margin: 0;
+    padding: 0;
+    background-color: #f2f2f2;
+}
+
+.icon-group {
+    font-size: 2.5em;
+    line-height: 2.5em;
+}
+
+.icon-group i {
+    padding: 15px;
+}
+
+.icon-alipay::before {
+    color: #00aaee;
+}
+
+.icon-wechat::before {
+    color: #00cd0d;
+}
+
+.icon-qq::before {
+    color: #df1f1f
+}
+
+.code-text {
+    line-height: 3em;
+    font-size: 1.5em;
+    margin: 3px;
+}
+
+.qrcode img {
+    display: inline-block;
+    border: 10px solid #fff;
+    margin: 10%;
+}
+
+html,
+body {
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.hidden {
+    display: none;
+}
+
+img {
+    max-width: 200px;
+}
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,64 @@
+html,
+body {
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.hidden {
+    display: none;
+}
+
+.jumbotron.my-auto {
+    max-width: 450px;
+    background-color: rgba(255, 255, 255, 0.65);
+    padding: 35px 35px 25px 35px;
+    border-radius: 1.2rem;
+}
+
+.container {
+    /* height: 100%;
+    display: flex; */
+    max-width: 960px;
+}
+
+.pricing-header {
+    max-width: 700px;
+}
+
+div.btn-group {
+    margin: 0 auto;
+    text-align: center;
+    width: inherit;
+}
+
+img {
+    max-width: 120px;
+}
+
+span.app-name {
+    padding: 0px;
+}
+
+i {
+    padding-right: 5px;
+}
+
+.very-small {
+    font-size: 0.8em;
+    color: rgb(199, 199, 199);
+    margin: 0;
+}
+
+.pd0 {
+    padding-right: 0 !important;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline lightblue;
+}
diff --git a/fonts/icons.eot b/fonts/icons.eot
diff --git a/fonts/icons.svg b/fonts/icons.svg
diff --git a/fonts/icons.ttf b/fonts/icons.ttf
diff --git a/fonts/icons.woff b/fonts/icons.woff