qrcode-generator-parser/index.html at main · EndlessPixel/qrcode-generator-parser · GitHub

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
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二维码生成与解析</title>
  <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h1>二维码生成与解析</h1>
    <div class="tabs" role="tablist">
      <button id="tab-generate" role="tab" aria-selected="true" onclick="switchTab('generate')">生成二维码</button>
      <button id="tab-parse" role="tab" aria-selected="false" onclick="switchTab('parse')">解析二维码</button>
    </div>

    <div id="generate-tab" role="tabpanel" aria-labelledby="tab-generate">
      <h2>生成二维码</h2>
      <div class="form-group">
        <label for="text-input">输入文本：</label>
        <input type="text" id="text-input" name="text" placeholder="请输入文本">
      </div>
      <div class="form-group">
        <label for="file-input">或上传文件：</label>
        <input type="file" id="file-input" name="file" accept=".txt,.md,.html,.css,.js,.json,.xml">
      </div>
      <div class="form-group">
        <label for="error-correction">纠错级别：</label>
        <select id="error-correction" name="error-correction">
          <option value="L">低 (L) - 7%</option>
          <option value="M" selected>中 (M) - 15%</option>
          <option value="Q">较高 (Q) - 25%</option>
          <option value="H">高 (H) - 30%</option>
        </select>
      </div>
      <div class="form-group">
        <label for="remote-url">或输入远程URL（返回JSON）：</label>
        <input type="text" id="remote-url" name="remote-url" placeholder="输入返回JSON数据的URL">
      </div>
      <div class="form-group">
        <label for="use-cors-proxy">使用CORS代理（解决跨域问题）：</label>
        <input type="checkbox" id="use-cors-proxy" name="use-cors-proxy">
      </div>
      <div class="form-group">
        <button onclick="generateQRCode()">生成二维码</button>
        <button id="download-btn" class="hidden">下载二维码图片</button>
        <button id="copy-url-btn" class="hidden">复制二维码URL</button>
        <button id="copy-image-btn" class="hidden">复制二维码图片</button>
      </div>
      <div id="qrcode-container"></div>
    </div>

    <div id="parse-tab" role="tabpanel" aria-labelledby="tab-parse" class="hidden">
      <h2>解析二维码</h2>
      <div class="form-group">
        <label for="image-upload">上传二维码图片：</label>
        <input type="file" id="image-upload" name="qr-image" accept="image/*">
      </div>
      <div class="form-group">
        <label for="image-url">或输入图片链接：</label>
        <input type="text" id="image-url" name="image-url" placeholder="输入 data:image 链接或普通图片 URL">
      </div>
      <div class="form-group">
        <button onclick="parseQRCode()">解析二维码</button>
        <button id="download-file-btn" class="hidden">下载还原文件</button>
      </div>
      <div id="parsed-text"></div>
    </div>

    <button id="debug-btn">查看调试</button>

    <div id="debug-modal" class="hidden">
      <div id="debug-content">
        <h2>调试日志</h2>
        <div id="debug-log"></div>
        <button id="debug-close">×</button>
        <div class="form-group">
          <button id="download-log-btn">下载日志文件</button>
          <button id="copy-log-btn">复制日志内容</button>
        </div>
      </div>
    </div>

    <!-- 右上角提示框 -->
    <div id="toast-container"></div>
  </div>
  <script src="script.js"></script>
</body>

</html>