barcode-printer/index.html at main · dannyphamv/barcode-printer · 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
95
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description"
    content="A simple Windows application for printing Code128 barcodes with a modern GUI and dark/light theme support." />
  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

  <link rel="stylesheet" type="text/css" href="https://dannyphamv.com/custom.css" />
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js"></script>
  <script defer src="https://dannyphamv.com/script.js"></script>
  <title>Barcode Printer</title>
</head>

<body>
  <header>
    <nav>
      <!-- rel="noopener" prevents security vulnerability when opening external links -->
      <a href="https://github.com/dannyphamv/barcode-printer" target="_blank" rel="noopener" aria-label="GitHub">
        <i class="fa-brands fa-github"></i> GitHub
      </a>
      <button id="theme-toggle" aria-label="Toggle Theme">
        <i class="fa-solid fa-moon"></i>
      </button>
    </nav>
    <h1>📦Barcode Printer</h1>
    <p>Made with <i class="fa-solid fa-heart"></i> for my fellow <i class="fa-brands fa-amazon"></i> CXO associates.</p>
  </header>

  <main>
    <p class="notice">
      A simple, modern Windows application for printing Code128 barcodes to
      any connected printer. Features a clean GUI with dark/light theme
      support, real-time barcode preview, and print history tracking.
    </p>

    <img id="app-screenshot" src="screenshot-dark.avif" alt="Screenshot of Barcode Printer application"
      fetchpriority="high" oncontextmenu="return false;" />
    <div style="text-align: center">
      <a class="button" href="https://github.com/dannyphamv/barcode-printer/releases/latest/download/LegacyBarcodePrinter_Setup.exe"><i
          class="fa-solid fa-download"></i> Download</a>
    </div>

  </main>
  <footer>
    <p class="meta">
      <!-- Dynamic year via JavaScript prevents manual updates -->
      © <span id="year"></span> Danny Pham — Built with
      <a href="https://simplecss.org/" target="_blank">Simple.css</a>
      and distributed under an
      <a href="https://github.com/dannyphamv/barcode-printer/blob/main/LICENSE" target="_blank" rel="noopener">MIT
        License.</a>
    </p>
  </footer>
  <script>
    const themeToggle = document.getElementById('theme-toggle');
    const screenshot = document.getElementById('app-screenshot');

    // Detect initial theme state
    function getInitialTheme() {
      // Check localStorage (common pattern for theme persistence)
      const saved = localStorage.getItem('theme');
      if (saved === 'dark') return true;
      if (saved === 'light') return false;

      // Check system preference as fallback
      return window.matchMedia('(prefers-color-scheme: dark)').matches;
    }

    let isDark = getInitialTheme();

    // Set initial screenshot
    if (screenshot) {
      screenshot.src = isDark ? 'screenshot-dark.avif' : 'screenshot-light.avif';
    }

    // Toggle on button click
    if (themeToggle && screenshot) {
      themeToggle.addEventListener('click', function () {
        setTimeout(function () {
          isDark = !isDark;
          screenshot.src = isDark ? 'screenshot-dark.avif' : 'screenshot-light.avif';
          console.log('Switched to:', isDark ? 'dark' : 'light');
        }, 100);
      });
    }
  </script>
</body>

</html>