79 lines
3.4 KiB
HTML
79 lines
3.4 KiB
HTML
<!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="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="ui container">
|
|
<div class="ui basic center aligned segment">
|
|
<h2 class="ui blue header">
|
|
<i class="qrcode icon"></i>
|
|
<div class="content">二维码生成器</div>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="ui two column centered grid">
|
|
<div class="column">
|
|
<div class="ui fluid raised card">
|
|
<div class="content form-content">
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label><i class="heading icon"></i>二维码标题</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" id="qrTitle" value="扫码签到">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="required field">
|
|
<label><i class="edit icon"></i>输入内容</label>
|
|
<textarea id="qrContent" placeholder="请输入要生成二维码的内容"></textarea>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label><i class="font icon"></i>底部文字</label>
|
|
<textarea id="centerText" placeholder="请输入要在二维码下方显示的文字"></textarea>
|
|
</div>
|
|
|
|
<div class="field button-container">
|
|
<div class="ui two buttons">
|
|
<button class="ui primary labeled icon button" id="generateBtn">
|
|
<i class="sync icon"></i>
|
|
生成二维码
|
|
</button>
|
|
<button class="ui labeled icon button" id="printBtn">
|
|
<i class="print icon"></i>
|
|
打印二维码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="ui fluid raised card preview-card">
|
|
<div class="content">
|
|
<div class="preview-paper">
|
|
<div class="preview-content">
|
|
<div id="qrcode"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 打印专用容器 -->
|
|
<div id="print-container" class="print-only"></div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|