QR-Code-Generator/popup.html at main · yutou-s-chrome-extensions/QR-Code-Generator · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Generator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="tabs">
      <button class="tab-btn active" data-tab="current-page" id="current-page-tab"></button>
      <button class="tab-btn" data-tab="custom-qr" id="custom-qr-tab"></button>
      <button class="tab-btn" data-tab="settings" id="settings-tab"></button>
    </div>

    <div class="language-selector">
      <select id="language-select">
        <option value="en">English</option>
        <option value="zh">中文</option>
      </select>
    </div>

    <div class="tab-content active" id="current-page">
      <div class="qr-container">
        <div id="current-qr-display" class="qr-display"></div>
        <div class="actions">
          <button id="download-current-qr" class="action-btn"></button>
          <button id="shorten-current-url" class="action-btn"></button>
        </div>
      </div>
    </div>

    <div class="tab-content" id="custom-qr">
      <div class="input-group">
        <input type="text" id="custom-text" placeholder="">
        <button id="generate-custom-qr" class="action-btn"></button>
      </div>
      <div class="qr-container">
        <div id="custom-qr-display" class="qr-display"></div>
        <div class="actions">
          <button id="download-custom-qr" class="action-btn"></button>
        </div>
      </div>
    </div>

    <div class="tab-content" id="settings">
      <div class="settings-group">
        <label for="qr-style" id="qr-style-label"></label>
        <select id="qr-style">
          <option value="square">Square</option>
          <option value="rounded">Rounded</option>
          <option value="dots">Dots</option>
        </select>
      </div>
      <div class="settings-group">
        <label for="qr-color" id="qr-color-label"></label>
        <input type="color" id="qr-color" value="#000000">
      </div>
      <div class="settings-group">
        <label for="background-color" id="background-color-label"></label>
        <input type="color" id="background-color" value="#FFFFFF">
      </div>
      <div class="settings-group">
        <label for="qr-size" id="qr-size-label"></label>
        <select id="qr-size">
          <option value="128">128 x 128</option>
          <option value="256" selected>256 x 256</option>
          <option value="512">512 x 512</option>
        </select>
      </div>
    </div>
  </div>

  <script src="lib/qrcode.min.js"></script>
  <script src="popup.js"></script>
</body>
</html>