-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathqrcode.html
More file actions
152 lines (139 loc) · 7.15 KB
/
qrcode.html
File metadata and controls
152 lines (139 loc) · 7.15 KB
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维码工具 - 太皮工具箱</title>
<link rel="icon" href="images/logo.png" type="image/png" />
<meta name="keywords" content="二维码生成, 二维码解码, QR码, 二维码工具">
<meta name="description" content="二维码工具，生成和解码二维码，支持文本、URL、联系方式等。">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- QRCode 库 -->
<!-- jsQR 库 -->
</head>
<body>
<div class="app-container">
<!-- 侧边栏导航 -->
<nav class="sidebar">
<div class="logo">
<img src="./images/logo.png" alt="太皮工具箱 Logo" class="logo-image"/>
<h1>太皮工具箱</h1>
</div>
<ul class="nav-menu" id="navMenu"></ul>
</nav>
<!-- 主内容区 -->
<main class="main-content">
<!-- 顶部栏 -->
<div class="topbar">
<h2>二维码工具</h2>
<div class="topbar-controls">
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
</div>
</div>
<!-- 二维码工具 -->
<div class="tool-content">
<div class="tool-header">
<div class="tool-icon">
<i class="fas fa-qrcode"></i>
</div>
<div>
<h2 class="tool-title">二维码工具</h2>
<p class="tool-description">生成和解码二维码，支持文本、URL、联系方式等</p>
</div>
</div>
<div class="crypto-options">
<div class="crypto-option active" data-qrcode-mode="generate">
<div class="crypto-option-title">
<i class="fas fa-qrcode"></i> 生成二维码
</div>
<div class="crypto-option-desc">将文本转换为二维码图片</div>
</div>
<div class="crypto-option" data-qrcode-mode="decode">
<div class="crypto-option-title">
<i class="fas fa-search"></i> 解码二维码
</div>
<div class="crypto-option-desc">从图片中提取二维码信息</div>
</div>
</div>
<!-- 生成二维码区域 -->
<div id="qrcode-generate" class="qrcode-section">
<div class="input-group">
<label for="qrcodeInput"><i class="fas fa-font"></i> 输入要编码的文本</label>
<textarea id="qrcodeInput" placeholder="输入要生成二维码的文本，如：https://example.com 或 任意文本"></textarea>
</div>
<div class="input-group">
<label for="qrcodeSize"><i class="fas fa-expand-alt"></i> 二维码尺寸</label>
<input type="range" id="qrcodeSize" min="100" max="500" value="200">
<div style="display: flex; justify-content: space-between; margin-top: 5px;">
<span>100px</span>
<span id="qrcodeSizeValue">200px</span>
<span>500px</span>
</div>
</div>
<div class="button-group">
<button id="generateQRCode" class="btn btn-success">
<i class="fas fa-qrcode"></i> 生成二维码
</button>
<button id="downloadQRCode" class="btn btn-secondary">
<i class="fas fa-download"></i> 下载二维码
</button>
<button id="clearQRCode" class="btn btn-warning">
<i class="fas fa-broom"></i> 清空
</button>
</div>
<div class="result-container">
<div class="result-title"><i class="fas fa-image"></i> 生成的二维码</div>
<div class="qrcode-result" id="qrcodeResult">
<div id="qrcodeCanvas" style="text-align: center; margin: 20px 0;"></div>
<div class="result-content copyable" id="qrcodeTextResult">等待生成二维码...</div>
</div>
</div>
</div>
<!-- 解码二维码区域 -->
<div id="qrcode-decode" class="qrcode-section" style="display: none;">
<div class="input-group">
<label for="qrcodeUpload"><i class="fas fa-upload"></i> 上传二维码图片</label>
<div class="file-upload">
<input type="file" id="qrcodeUpload" accept="image/*">
<div class="upload-area" id="uploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<p>点击选择二维码图片，或将图片拖拽到此处</p>
<p class="upload-hint">支持 JPG, PNG, GIF 格式，最大 5MB</p>
</div>
</div>
</div>
<div class="input-group">
<label><i class="fas fa-image"></i> 图片预览</label>
<div class="image-preview" id="imagePreview">
<p>预览区域</p>
</div>
</div>
<div class="button-group">
<button id="decodeQRCode" class="btn btn-success">
<i class="fas fa-search"></i> 解码二维码
</button>
<button id="clearUpload" class="btn btn-warning">
<i class="fas fa-broom"></i> 清空
</button>
</div>
<div class="result-container">
<div class="result-title"><i class="fas fa-file-alt"></i> 解码结果</div>
<div class="result-content copyable" id="decodeResult">等待解码...</div>
</div>
</div>
</div>
<!-- 主内容区页脚 -->
<div id="main-footer-container"></div>
</main>
</div>
<!-- JavaScript文件 -->
<script src="js/main.js"></script>
<script src="js/tools/qrcode.js"></script>
<script src="js/footer.js"></script>
</body>
</html>