-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (103 loc) · 5.48 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plup - Produce Lookup Utility</title>
<link rel="icon" type="image/x-icon" media="(prefers-color-scheme: dark)" sizes="16x16 32x32 64x64 128x128 256x256" href="./assets/img/favi/favi_blk.ico">
<link rel="icon" type="image/x-icon" media="(prefers-color-scheme: light)" sizes="16x16 32x32 64x64 128x128 256x256" href="./assets/img/favi/favi_wht.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="./assets/site/styles.css">
<link rel="stylesheet" href="./assets/lib/bootstrap-icons/bootstrap-icons.css">
<link rel="manifest" href="./assets/site/manifest.json">
</head>
<body>
<header>
<div id="hamburger-icon" class="hamburger-icon">

</div>
<img src="assets/branding/logo/fragments/w_logo_512.png" alt="Plup Logo" id="logo">
<input type="search" id="searchInput" placeholder="Search by PLU or name..." autocomplete="off">
</header>
<div id="hamburger-menu" class="hamburger-menu">
<div class="menu-icon">
<img src="assets/branding/icon/fragments/b_icon_256.png" alt="Menu Icon">
<span>Menu</span>
</div>
<ul>
<li><a href="#" id="home-link"><i class="bi bi-house-fill"></i> Home</a></li>
<li><a href="#" id="preferences-link"><i class="bi bi-gear-fill"></i> Preferences</a></li>
<li><a href="https://github.com/project-mira/plup/blob/main/assets/lib/info/licenses.md" target="_blank" id="licenses-link"><i class="bi bi-book-fill"></i> Licenses</a></li>
<li><a href="#" id="about-link"><i class="bi bi-info-circle-fill"></i> About</a></li>
</ul>
</div>
<div id="menu-overlay" class="menu-overlay"></div>
<main id="main-content">
<div id="results"></div>
</main>
<main id="preferences-content" style="display: none;">
<h2 id="preferences-title">Preferences</h2>
<div class="preference-card">
<h3>Theme</h3>
<p class="description">Changes the app's appearance between light and dark.</p>
<label class="switch">
<select name="theme" id="theme-toggle">
<option value="default">Auto (device theme)</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="amoled">Black (AMOLED)</option>
<option value="custom">Custom</option>
</select>
</label>
</div>
<div class="preference-card">
<h3>Results per page</h3>
<p class="description">Set the number of results to display per page.</p>
<input type="number" id="results-per-page" name="results-per-page" min="1" max="100" value="10">
</div>
<div class="preference-card">
<h3>Reset Preferences</h3>
<p class="description">Reset all app preferences and data.</p>
<button id="reset-preferences" onclick="showConfirmationPopup()" class="reset-button">Reset</button>
</div>
</main>
<div id="about-popup" class="popup">
<div class="popup-content">
<span class="close"></span>
<img src="assets/branding/logo/fragments/b_logo_256.png" alt="Plup Logo" class="popup-logo">
<p class="version"></p>
<p>Plup helps retail grocery cashiers quickly search for produce PLU codes and display UPCs on-the-fly.</p>
<p>© 2024 Project Mira. All rights reserved.</p>
<p>This project is <a href="https://github.com/project-mira/plup/" target="_blank">open-source</a> and licensed under the <a href="https://github.com/QuarTheDev/plup/blob/main/LICENSE" target="_blank">GNU AGPL-3.0</a> license.</p>
</div>
</div>
<div id="result-popup" class="popup">
<div class="popup-content">
<span class="close close-popup"></span>
<div class="popup-header">
<img src="" alt="Produce Image" class="popup-produce-image">
<div class="popup-details">
<p class="popup-produce-name"><strong></strong></p>
<p class="popup-produce-plu"></p>
<p class="popup-produce-class"></p>
</div>
</div>
<p class="popup-produce-description"></p>
<svg class="popup-barcode-image" alt="Scan me on any register."></svg>
</div>
</div>
<div id="confirmation-popup" class="popup">
<div class="popup-content">
<h2><i class="bi bi-exclamation-diamond"></i> Confirmation</h2>
<p>Are you sure you wish to permanently reset all app data? This cannot be undone!</p>
<div class="popup-buttons">
<button onclick="resetAppData()" class="reset-button">Reset</button>
<button onclick="closePopup()" class="cancel-button">Cancel</button>
</div>
</div>
</div>
<script src="assets/site/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.code128.min.js"></script>
</body>
</html>