Add files via upload

DilemmaGX · Dec 8, 2023 · 743e3a9 · 743e3a9
1 parent 9004a2b
commit 743e3a9
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/index.js b/index.js
@@ -0,0 +1,35 @@
+function generateBadge() {
+    var leftText = document.getElementById('input-text').value || '';
+    var rightText = document.getElementById('input-text-right').value || '';
+    var textColor = document.getElementById('input-color').value || 'default';
+    var url = document.getElementById('input-url').value || '';
+
+    // 如果rightText为空，则不执行任何操作    
+    if (rightText === '') {
+        return;  // 点击按钮后什么也不干  
+    }
+
+    // 如果leftText为空，则直接使用rightText生成URL    
+    if (leftText === '') {
+        var badgeUrl = 'https://img.shields.io/badge/' + encodeURIComponent(rightText) + '-' + textColor.replace(/[^a-zA-Z0-9]/g, '');
+    } else {
+        var badgeUrl = 'https://img.shields.io/badge/' + encodeURIComponent(leftText) + '-' + encodeURIComponent(rightText) + '-' + textColor.replace(/[^a-zA-Z0-9]/g, '');
+    }
+
+    var html = '<a href="' + url + '"><img src="' + badgeUrl + '" alt="' + leftText + ' - ' + rightText + '"></a>';
+    var md = '![' + leftText + '](' + badgeUrl + ')';
+
+    document.getElementById('result-html').innerHTML = html;
+    if (url === '') {
+        var html = '<a href="' + badgeUrl + '"><img src="' + badgeUrl + '" alt="' + leftText + ' - ' + rightText + '"></a>';
+        document.getElementById('result-html').innerHTML = html;
+        document.getElementById('result-md').innerHTML = md;
+    } else {
+        if (!/^https?:\/\//.test(url)) {
+            url = "http://" + url;
+        }
+        var html = '<a href="' + url + '"><img src="' + badgeUrl + '" alt="' + leftText + ' - ' + rightText + '"></a>';
+        document.getElementById('result-html').innerHTML = html;
+        document.getElementById('result-md').innerHTML = "[" + md + "](" + url + ")";
+    }
+}
diff --git a/shields.html b/shields.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Shields Badge Generator</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+    <h1>Shields Badge Generator</h1>
+    <label for="input-text">Left Text:</label>
+    <input type="text" id="input-text" placeholder="Optional left text">
+    <label for="input-text-right">Right Text:</label>
+    <input type="text" id="input-text-right" placeholder="Required right text">
+    <label for="input-color">Text Color:</label>
+    <input type="text" id="input-color"
+        placeholder="Optional text color (hex, rgb, rgba, hsl, hsla or css named color)">
+    <label for="input-url">Link to:</label>
+    <input type="text" id="input-url" placeholder="Optional link url">
+    <br><br>
+    <button onclick="generateBadge()">Generate Badge</button>
+    <div class="result" id="result-html"></div>
+    <div class="result" id="result-md"></div>
+
+    <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,50 @@
+body {  
+    font-family: Arial, sans-serif;  
+    margin: 0;  
+    padding: 20px;  
+    box-sizing: border-box;  
+}  
+
+h1 {  
+    color: #333;  
+}  
+
+label {  
+    display: block;  
+    margin-top: 10px;  
+}  
+
+input[type="text"] {  
+    width: 300px;  
+    padding: 5px;  
+    font-size: 16px;  
+    border: 1px solid #ccc;  
+    border-radius: 5px;  
+}  
+
+button {  
+    padding: 5px 10px;  
+    font-size: 16px;  
+    border: none;  
+    background-color: rgb(0, 89, 255);  
+    color: white;  
+    cursor: pointer;  
+    border-radius: 5px;  
+    transition: background-color 0.3s ease;  /* 添加过渡效果 */  
+}  
+
+button:hover {  
+    background-color: #008cff;  /* 鼠标悬停时的背景色 */  
+}  
+
+.result {  
+    margin-top: 20px;  
+    font-size: 14px;  
+}  
+
+.result code {  
+    background-color: #f5f5f5;  
+    padding: 5px;  
+    border-radius: 3px;  
+    overflow: auto;  
+}