v3
This commit is contained in:
jpmvaz
@@ -0,0 +1,38 @@
|
||||
# Version control
|
||||
.git
|
||||
.gitignore
|
||||
.gitattributes
|
||||
|
||||
# Documentation that doesn't belong in the image
|
||||
README.md
|
||||
LICENSE
|
||||
CHANGELOG.md
|
||||
docs/
|
||||
|
||||
# Editor / OS junk
|
||||
.vscode
|
||||
.idea
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# Local env files (use .env at the compose level, not inside the image)
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Build artefacts that shouldn't be shipped
|
||||
node_modules
|
||||
dist
|
||||
build
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# CI
|
||||
.github/
|
||||
|
||||
# Test outputs
|
||||
coverage/
|
||||
.nyc_output/
|
||||
@@ -0,0 +1,5 @@
|
||||
# Copy to `.env` and tweak as needed.
|
||||
# These values feed docker-compose.yml.
|
||||
|
||||
# Public port on the host machine. Defaults to 8080.
|
||||
HOST_PORT=8080
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
# =============================================================================
|
||||
# Cipher Barcode Studio — production image
|
||||
# Base: nginx 1.30.1 on Alpine 3.23 (unprivileged variant — runs as UID 101)
|
||||
# =============================================================================
|
||||
|
||||
FROM nginxinc/nginx-unprivileged:1.30.1-alpine3.23-slim
|
||||
|
||||
# OCI labels for traceability
|
||||
LABEL org.opencontainers.image.title="Cipher Barcode Studio" \
|
||||
org.opencontainers.image.description="Static web app for generating barcodes in 22 symbologies and exporting JPG/PNG" \
|
||||
org.opencontainers.image.version="1.0.0" \
|
||||
org.opencontainers.image.licenses="MIT" \
|
||||
org.opencontainers.image.source="https://example.com/cipher-barcode-studio"
|
||||
|
||||
# The unprivileged image runs as user 101 (nginx). All file ops use --chown.
|
||||
USER root
|
||||
|
||||
# Apply the latest Alpine security patches at build time, then strip the cache
|
||||
RUN apk update && apk upgrade --no-cache && rm -rf /var/cache/apk/*
|
||||
|
||||
# Replace the default nginx config with our hardened one
|
||||
COPY --chown=nginx:nginx nginx/nginx.conf /etc/nginx/nginx.conf
|
||||
|
||||
# Copy the static site
|
||||
COPY --chown=nginx:nginx web/ /usr/share/nginx/html/
|
||||
|
||||
# Make sure runtime dirs the unprivileged user needs are writable
|
||||
RUN mkdir -p /tmp/client_body /tmp/proxy /tmp/fastcgi /tmp/uwsgi /tmp/scgi \
|
||||
&& chown -R nginx:nginx /tmp/client_body /tmp/proxy /tmp/fastcgi /tmp/uwsgi /tmp/scgi /var/log/nginx \
|
||||
&& chmod -R 755 /usr/share/nginx/html
|
||||
|
||||
# Drop back to the non-root user for runtime
|
||||
USER nginx
|
||||
|
||||
# Internal port — unprivileged nginx listens on 8080
|
||||
EXPOSE 8080
|
||||
|
||||
# Healthcheck driven by /healthz from nginx.conf
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD wget --quiet --tries=1 --spider http://127.0.0.1:8080/healthz || exit 1
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -0,0 +1,29 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2026 Cipher Barcode Studio
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
---
|
||||
|
||||
Third-party software shipped with this project retains its own license:
|
||||
|
||||
* JsBarcode (MIT) — https://github.com/lindell/JsBarcode
|
||||
* bwip-js (MIT) — https://github.com/metafloor/bwip-js
|
||||
* nginx (BSD-2-Clause) — https://nginx.org/LICENSE
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,385 @@
|
||||
# Cipher · Barcode Studio
|
||||
|
||||
A self-contained, browser-based barcode generator that converts text or numeric sequences into 22 different barcode symbologies and exports them as downloadable JPG (or PNG) images. Designed to run as a single hardened Docker container with no backend, no database, and no telemetry — everything happens in the user's browser.
|
||||
|
||||
  
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Features](#features)
|
||||
2. [Supported Barcode Formats](#supported-barcode-formats)
|
||||
3. [Architecture](#architecture)
|
||||
4. [Requirements](#requirements)
|
||||
5. [Quick Start](#quick-start)
|
||||
6. [Configuration](#configuration)
|
||||
7. [Project Structure](#project-structure)
|
||||
8. [Security](#security)
|
||||
9. [Dependency Versions & Vulnerability Status](#dependency-versions--vulnerability-status)
|
||||
10. [Operations](#operations)
|
||||
11. [Updating & Maintenance](#updating--maintenance)
|
||||
12. [Troubleshooting](#troubleshooting)
|
||||
13. [Development](#development)
|
||||
14. [License](#license)
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
* **22 barcode symbologies** spanning retail/GS1, linear/industrial, pharma, postal and 2D matrix codes.
|
||||
* **Live example preview** — every symbology shows a sample render the moment it's selected.
|
||||
* **Batch generation** — paste lines into the input area and each line becomes its own barcode card.
|
||||
* **Per-card text toggle** — show or hide the human-readable caption beneath each barcode, then download it in that state.
|
||||
* **JPG and PNG export** — individual downloads per barcode plus a one-click "Download All as JPG" for the whole batch.
|
||||
* **Adjustable scale and JPG quality** for print-ready output.
|
||||
* **Fully offline-capable** once loaded — every library is vendored locally, no third-party CDN at runtime (web fonts are the only external request and are optional).
|
||||
* **No backend** — runs entirely as static assets served by nginx. No database, no API, no user data leaves the browser.
|
||||
|
||||
---
|
||||
|
||||
## Supported Barcode Formats
|
||||
|
||||
| Group | Symbology | Notes |
|
||||
|---|---|---|
|
||||
| Retail · GS1 | EAN-13, EAN-8, UPC-A, UPC-E, ISBN-13, GS1 DataBar, GS1-128 | ISBN-10 auto-converts to ISBN-13 |
|
||||
| Linear · Industrial | Code-128, Code-39, Code-39 Full ASCII, Code-93, Code-11, Code 2of5 Interleaved, MSI Plessey, Flattermarken, Telepen Alpha | |
|
||||
| Pharma · Specialty | Pharmacode One-Track, Pharmacode Two-Track | Laetus binary codes |
|
||||
| Postal | KIX | Dutch PostNL routing |
|
||||
| 2D · Matrix | QR Code, Data Matrix, PDF417 | |
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Browser │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ index.html (UI + state) │ │
|
||||
│ │ ├── JsBarcode (linear codes) │ │
|
||||
│ │ └── bwip-js (specialty + 2D codes) │ │
|
||||
│ │ ─→ HTMLCanvasElement → JPG / PNG Blob │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
└──────────────────────────────┬──────────────────────────────┘
|
||||
│ HTTP (static assets only)
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Docker container · nginx 1.30.1 · alpine 3.23 │
|
||||
│ • runs as non-root (UID 101) │
|
||||
│ • read-only root filesystem │
|
||||
│ • all caps dropped, no-new-privileges │
|
||||
│ • CSP / HSTS / nosniff / X-Frame-Options / COOP / CORP │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
Encoding happens **entirely in the browser** — the container only ships static HTML/JS. The image cannot leak data because there is no application server to leak through.
|
||||
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
| Component | Minimum version | Why |
|
||||
|---|---|---|
|
||||
| Docker Engine | **24.0+** | Buildkit, compose-v2 features |
|
||||
| Docker Compose | **v2.20+** | Modern compose schema (`deploy.resources`, `tmpfs` options) |
|
||||
| Host OS | Linux / macOS / Windows (WSL2) | Anything Docker supports |
|
||||
| RAM | 64 MB free | Container reserves 32 MB, caps at 128 MB |
|
||||
| Disk | ~50 MB | Image is ~40 MB |
|
||||
| Open port | one host port (default 8080) | Reconfigurable via `.env` |
|
||||
|
||||
Verify your toolchain:
|
||||
|
||||
```bash
|
||||
docker --version # → Docker version 24.x.x or newer
|
||||
docker compose version # → Docker Compose version v2.20+ or newer
|
||||
```
|
||||
|
||||
If you're on an older Docker that only has the standalone `docker-compose` binary, the file still works — just replace `docker compose` with `docker-compose` in the commands below.
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
# 1. Unzip and enter the project
|
||||
unzip cipher-barcode-studio.zip
|
||||
cd cipher-barcode-studio
|
||||
|
||||
# 2. (Optional) override the host port
|
||||
cp .env.example .env # then edit HOST_PORT if needed
|
||||
|
||||
# 3. Build and start
|
||||
docker compose up -d --build
|
||||
|
||||
# 4. Open in browser
|
||||
# http://localhost:8080
|
||||
```
|
||||
|
||||
That's it. To stop:
|
||||
|
||||
```bash
|
||||
docker compose down
|
||||
```
|
||||
|
||||
To stop and remove the built image as well:
|
||||
|
||||
```bash
|
||||
docker compose down --rmi local
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuration
|
||||
|
||||
All runtime configuration lives in `.env` (copied from `.env.example`):
|
||||
|
||||
| Variable | Default | Description |
|
||||
|---|---|---|
|
||||
| `HOST_PORT` | `8080` | Port published on the host machine |
|
||||
|
||||
The container itself always listens on `8080` internally — only the host-side port is configurable.
|
||||
|
||||
### Putting it behind a reverse proxy
|
||||
|
||||
If you're running this behind Traefik, Caddy, nginx, or similar:
|
||||
|
||||
```yaml
|
||||
# example with Traefik labels
|
||||
services:
|
||||
cipher:
|
||||
# ...existing config...
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.routers.cipher.rule=Host(`barcode.example.com`)"
|
||||
- "traefik.http.routers.cipher.tls=true"
|
||||
- "traefik.http.routers.cipher.tls.certresolver=letsencrypt"
|
||||
- "traefik.http.services.cipher.loadbalancer.server.port=8080"
|
||||
```
|
||||
|
||||
When fronted by HTTPS, the `Strict-Transport-Security` header in `nginx.conf` will kick in automatically.
|
||||
|
||||
---
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
cipher-barcode-studio/
|
||||
├── docker-compose.yml # Orchestration + runtime hardening
|
||||
├── Dockerfile # Image build steps
|
||||
├── .dockerignore # Keep the build context lean
|
||||
├── .env.example # Template for runtime config
|
||||
├── LICENSE # MIT + third-party attributions
|
||||
├── README.md # You are here
|
||||
├── nginx/
|
||||
│ └── nginx.conf # Hardened nginx config w/ CSP & security headers
|
||||
└── web/
|
||||
├── index.html # The full application (single HTML file)
|
||||
└── vendor/
|
||||
├── JsBarcode.all.min.js
|
||||
└── bwip-js-min.js
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Security
|
||||
|
||||
This image is built with a defense-in-depth posture even though it serves static content with no user data:
|
||||
|
||||
### Container hardening
|
||||
|
||||
| Control | Mechanism |
|
||||
|---|---|
|
||||
| Non-root execution | Image's `USER` is `nginx` (UID 101). Compose pins `user: "101:101"`. |
|
||||
| Read-only rootfs | `read_only: true` in compose; writable paths exposed via `tmpfs`. |
|
||||
| Capability drop | `cap_drop: [ALL]` — no Linux capabilities granted. |
|
||||
| No privilege escalation | `security_opt: no-new-privileges:true`. |
|
||||
| Resource limits | CPU capped at 0.5 cores, memory at 128 MB. |
|
||||
| Minimal base | `nginxinc/nginx-unprivileged:alpine3.23-slim` — Alpine, no extra packages, security upgrades applied at build. |
|
||||
| Restricted log size | json-file driver capped at 5 MB × 3 rotations. |
|
||||
|
||||
### HTTP hardening (in `nginx/nginx.conf`)
|
||||
|
||||
| Header | Purpose |
|
||||
|---|---|
|
||||
| `Content-Security-Policy` | Restricts scripts/styles/fonts/images to `self` + Google Fonts only |
|
||||
| `Strict-Transport-Security` | One-year HSTS with subdomain coverage (effective behind TLS) |
|
||||
| `X-Frame-Options: DENY` + CSP `frame-ancestors 'none'` | Clickjacking protection |
|
||||
| `X-Content-Type-Options: nosniff` | Disables MIME sniffing |
|
||||
| `Referrer-Policy: strict-origin-when-cross-origin` | Limits referrer leakage |
|
||||
| `Permissions-Policy` | Disables camera, mic, geolocation, USB, payment APIs |
|
||||
| `Cross-Origin-Opener-Policy: same-origin` | Window isolation |
|
||||
| `Cross-Origin-Resource-Policy: same-origin` | Resource isolation |
|
||||
| `server_tokens off` | Hides nginx version |
|
||||
|
||||
Also: request size capped at 1 KB (this is a static GET-only service), hidden files (`/\.`) blocked, `/healthz` lightweight endpoint for orchestrators.
|
||||
|
||||
### Supply chain
|
||||
|
||||
* JavaScript libraries are **vendored** under `web/vendor/`, not loaded from CDN at runtime.
|
||||
* Each `<script>` tag in `index.html` carries a **Subresource Integrity (SRI)** hash (`sha384`), so any tampering with the vendor files will cause the browser to refuse execution.
|
||||
* The only runtime third-party connection is to Google Fonts for typography. If you need full air-gap operation, see [Removing Google Fonts](#removing-google-fonts).
|
||||
|
||||
### Scanning the image yourself
|
||||
|
||||
```bash
|
||||
docker compose build
|
||||
docker scout cves cipher-barcode-studio:1.0.0 # native Docker scanner
|
||||
# or
|
||||
trivy image cipher-barcode-studio:1.0.0 # Trivy
|
||||
# or
|
||||
grype cipher-barcode-studio:1.0.0 # Grype
|
||||
```
|
||||
|
||||
Expect findings to be limited to base-image OS packages; the application itself has no Node.js, npm, or other runtime dependencies to scan.
|
||||
|
||||
---
|
||||
|
||||
## Dependency Versions & Vulnerability Status
|
||||
|
||||
All versions verified against published CVE feeds at build time.
|
||||
|
||||
| Component | Pinned version | Latest as of build | Known CVEs | Source of truth |
|
||||
|---|---|---|---|---|
|
||||
| nginx | `1.30.1` | 1.30.1 (stable) | none active | [nginx security advisories](https://nginx.org/en/security_advisories.html) |
|
||||
| Alpine Linux | `3.23` | 3.23 | base image kept patched via `apk upgrade` in Dockerfile | [Alpine secdb](https://secdb.alpinelinux.org/) |
|
||||
| JsBarcode | `3.12.3` | 3.12.3 | 0 | [Snyk advisor](https://snyk.io/advisor/npm-package/jsbarcode), [Socket](https://socket.dev/npm/package/jsbarcode) |
|
||||
| bwip-js | `4.10.1` | 4.10.1 | 0 | [Snyk advisor](https://security.snyk.io/package/npm/bwip-js) |
|
||||
|
||||
The build pulls `nginxinc/nginx-unprivileged:1.30.1-alpine3.23-slim` and then runs `apk upgrade --no-cache` so any Alpine package CVEs disclosed after the image was published are still patched.
|
||||
|
||||
If you fork this repo, re-run the vulnerability check periodically:
|
||||
|
||||
```bash
|
||||
docker compose build --no-cache
|
||||
trivy image --severity HIGH,CRITICAL cipher-barcode-studio:1.0.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Operations
|
||||
|
||||
### View logs
|
||||
|
||||
```bash
|
||||
docker compose logs -f cipher
|
||||
```
|
||||
|
||||
### Healthcheck
|
||||
|
||||
```bash
|
||||
docker inspect --format='{{json .State.Health}}' cipher-barcode-studio | jq
|
||||
# or hit it directly:
|
||||
curl -i http://localhost:8080/healthz
|
||||
```
|
||||
|
||||
### Restart
|
||||
|
||||
```bash
|
||||
docker compose restart cipher
|
||||
```
|
||||
|
||||
### Inspect security posture of the running container
|
||||
|
||||
```bash
|
||||
docker inspect cipher-barcode-studio | jq '.[0].HostConfig | {ReadonlyRootfs, CapDrop, SecurityOpt, Memory, NanoCpus}'
|
||||
```
|
||||
|
||||
Expected output should include `"ReadonlyRootfs": true`, `"CapDrop": ["ALL"]`, and `"no-new-privileges:true"`.
|
||||
|
||||
---
|
||||
|
||||
## Updating & Maintenance
|
||||
|
||||
### Rebuild with the latest patches
|
||||
|
||||
```bash
|
||||
docker compose build --no-cache --pull
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
`--pull` forces Docker to refetch the base image, ensuring you pick up new Alpine and nginx releases.
|
||||
|
||||
### Update a vendored JS library
|
||||
|
||||
```bash
|
||||
cd web/vendor
|
||||
|
||||
# Example: bump bwip-js
|
||||
curl -sSL -o bwip-js-min.js "https://cdn.jsdelivr.net/npm/bwip-js@<new-version>/dist/bwip-js-min.js"
|
||||
|
||||
# Recompute the SRI hash
|
||||
openssl dgst -sha384 -binary bwip-js-min.js | openssl base64 -A | xargs -I{} echo "sha384-{}"
|
||||
|
||||
# Paste the new hash into the integrity="" attribute in web/index.html
|
||||
# Rebuild
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
### Removing Google Fonts
|
||||
|
||||
If you need a fully air-gapped install, edit `web/index.html`:
|
||||
|
||||
1. Delete the three `<link rel="preconnect">` and `<link rel="stylesheet">` tags pointing at `fonts.googleapis.com` / `fonts.gstatic.com`.
|
||||
2. The page still works — it just falls back to the next font in each `font-family` stack (`serif` / `monospace`).
|
||||
3. Tighten `nginx/nginx.conf` by removing the `https://fonts.googleapis.com` and `https://fonts.gstatic.com` entries from the CSP.
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Symptom | Cause | Fix |
|
||||
|---|---|---|
|
||||
| `bind: address already in use` | Port 8080 is taken | Set `HOST_PORT=8081` (or any free port) in `.env` and `docker compose up -d` |
|
||||
| Container restart-loops with "Permission denied" on `/var/cache/nginx` | Older Docker without tmpfs option support | Upgrade Docker Engine to 24+ |
|
||||
| Browser shows blank page, console says "Refused to execute script ... integrity" | Vendor file modified locally without updating SRI | Recompute SRI hash (see [Updating](#update-a-vendored-js-library)) |
|
||||
| Fonts look generic | Network blocks Google Fonts | Either allow `fonts.googleapis.com` / `fonts.gstatic.com` or follow [Removing Google Fonts](#removing-google-fonts) |
|
||||
| QR / Data Matrix barcode renders but caption is cut off | Output is a 2D code with long text | Hide the text via the per-card "Hide text" button, or shorten the input |
|
||||
| `docker compose` not found | Only the legacy standalone `docker-compose` is installed | Use `docker-compose up -d --build` instead; or install the v2 plugin |
|
||||
|
||||
### Resetting from scratch
|
||||
|
||||
```bash
|
||||
docker compose down --rmi local --volumes
|
||||
docker compose up -d --build --force-recreate
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Development
|
||||
|
||||
To iterate on the UI without rebuilding the image every time, mount `web/` over the container's webroot:
|
||||
|
||||
```yaml
|
||||
# docker-compose.override.yml (gitignored convention)
|
||||
services:
|
||||
cipher:
|
||||
volumes:
|
||||
- ./web:/usr/share/nginx/html:ro
|
||||
```
|
||||
|
||||
Then:
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
# edit web/index.html, refresh the browser — no rebuild needed
|
||||
```
|
||||
|
||||
When you're done, delete the override file and rebuild for production.
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
This project is released under the **MIT License** — see [LICENSE](./LICENSE).
|
||||
|
||||
Third-party libraries retain their own licenses:
|
||||
|
||||
* **JsBarcode** — MIT — https://github.com/lindell/JsBarcode
|
||||
* **bwip-js** — MIT — https://github.com/metafloor/bwip-js
|
||||
* **nginx** — BSD-2-Clause — https://nginx.org/LICENSE
|
||||
* **Alpine Linux** — MIT-equivalent — https://alpinelinux.org/
|
||||
|
||||
---
|
||||
|
||||
*Built with care. Encode anything. Print everything.*
|
||||
@@ -0,0 +1,66 @@
|
||||
# =============================================================================
|
||||
# Cipher Barcode Studio — docker-compose
|
||||
# Usage: docker compose up -d --build
|
||||
# Access: http://localhost:8080
|
||||
# =============================================================================
|
||||
|
||||
services:
|
||||
cipher:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
image: cipher-barcode-studio:1.0.0
|
||||
container_name: cipher-barcode-studio
|
||||
restart: unless-stopped
|
||||
|
||||
ports:
|
||||
# Host:Container — change the left side to publish on a different port
|
||||
- "${HOST_PORT:-8080}:8080"
|
||||
|
||||
# ---------- Runtime hardening ----------
|
||||
# Run as the non-root user baked into the image (UID 101)
|
||||
user: "101:101"
|
||||
# Read-only root filesystem with explicit tmpfs for nginx's scratch dirs
|
||||
read_only: true
|
||||
tmpfs:
|
||||
- /tmp:rw,noexec,nosuid,size=16m
|
||||
- /var/cache/nginx:rw,noexec,nosuid,size=16m
|
||||
- /var/run:rw,noexec,nosuid,size=4m
|
||||
# Drop every Linux capability; nginx-unprivileged on port 8080 needs none
|
||||
cap_drop:
|
||||
- ALL
|
||||
# Stop the container from gaining new privileges
|
||||
security_opt:
|
||||
- no-new-privileges:true
|
||||
|
||||
# ---------- Resource limits ----------
|
||||
deploy:
|
||||
resources:
|
||||
limits:
|
||||
cpus: "0.50"
|
||||
memory: 128M
|
||||
reservations:
|
||||
cpus: "0.05"
|
||||
memory: 32M
|
||||
|
||||
# ---------- Logging ----------
|
||||
logging:
|
||||
driver: "json-file"
|
||||
options:
|
||||
max-size: "5m"
|
||||
max-file: "3"
|
||||
|
||||
# ---------- Healthcheck (overrides Dockerfile so we can tune it) ----------
|
||||
healthcheck:
|
||||
test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://127.0.0.1:8080/healthz"]
|
||||
interval: 30s
|
||||
timeout: 3s
|
||||
retries: 3
|
||||
start_period: 5s
|
||||
|
||||
networks:
|
||||
- cipher-net
|
||||
|
||||
networks:
|
||||
cipher-net:
|
||||
driver: bridge
|
||||
@@ -0,0 +1,128 @@
|
||||
# Cipher Barcode Studio — hardened nginx configuration
|
||||
# Static-only site, no upstream, no PHP, no dynamic code. Read-only filesystem.
|
||||
|
||||
worker_processes auto;
|
||||
pid /tmp/nginx.pid;
|
||||
|
||||
events {
|
||||
worker_connections 1024;
|
||||
}
|
||||
|
||||
http {
|
||||
include /etc/nginx/mime.types;
|
||||
default_type application/octet-stream;
|
||||
|
||||
# Temp paths in /tmp so we can run as a non-root user with a read-only rootfs
|
||||
client_body_temp_path /tmp/client_body;
|
||||
proxy_temp_path /tmp/proxy;
|
||||
fastcgi_temp_path /tmp/fastcgi;
|
||||
uwsgi_temp_path /tmp/uwsgi;
|
||||
scgi_temp_path /tmp/scgi;
|
||||
|
||||
# Logging
|
||||
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||
'$status $body_bytes_sent "$http_referer" '
|
||||
'"$http_user_agent"';
|
||||
access_log /var/log/nginx/access.log main;
|
||||
error_log /var/log/nginx/error.log warn;
|
||||
|
||||
# Performance
|
||||
sendfile on;
|
||||
tcp_nopush on;
|
||||
tcp_nodelay on;
|
||||
keepalive_timeout 30;
|
||||
server_tokens off; # hide nginx version
|
||||
|
||||
# Limits — this is a static-only site, so cap request size strictly
|
||||
client_max_body_size 1k;
|
||||
client_body_buffer_size 1k;
|
||||
client_header_buffer_size 1k;
|
||||
large_client_header_buffers 2 4k;
|
||||
|
||||
# Compression
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_proxied any;
|
||||
gzip_comp_level 6;
|
||||
gzip_min_length 256;
|
||||
gzip_types
|
||||
text/plain
|
||||
text/css
|
||||
text/javascript
|
||||
application/javascript
|
||||
application/json
|
||||
image/svg+xml
|
||||
font/woff2;
|
||||
|
||||
server {
|
||||
listen 8080 default_server;
|
||||
listen [::]:8080 default_server;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# ---------- Security headers ----------
|
||||
# Static-only site: tight CSP. Inline styles/scripts are unavoidable
|
||||
# because the app is one self-contained HTML file, but external scripts
|
||||
# are restricted to 'self' and validated with SRI in the markup.
|
||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';" always;
|
||||
|
||||
# Block framing entirely (defense-in-depth alongside CSP frame-ancestors)
|
||||
add_header X-Frame-Options "DENY" always;
|
||||
|
||||
# Stop MIME-type sniffing
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
|
||||
# Disable unused browser features
|
||||
add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), interest-cohort=(), payment=(), usb=()" always;
|
||||
|
||||
# Don't leak referrer to third-party fonts
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
|
||||
# HSTS — only meaningful behind HTTPS; harmless on HTTP
|
||||
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
|
||||
|
||||
# Cross-origin isolation
|
||||
add_header Cross-Origin-Opener-Policy "same-origin" always;
|
||||
add_header Cross-Origin-Resource-Policy "same-origin" always;
|
||||
|
||||
# ---------- Routes ----------
|
||||
# Hash-able vendor assets get long-lived caches
|
||||
location /vendor/ {
|
||||
add_header Cache-Control "public, max-age=2592000, immutable" always;
|
||||
# Re-apply security headers (add_header doesn't inherit across location blocks)
|
||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-Frame-Options "DENY" always;
|
||||
try_files $uri =404;
|
||||
}
|
||||
|
||||
# The main HTML — short cache so updates roll out
|
||||
location = / {
|
||||
add_header Cache-Control "public, max-age=300, must-revalidate" always;
|
||||
try_files /index.html =404;
|
||||
}
|
||||
|
||||
# Healthcheck endpoint for docker / orchestrators
|
||||
location = /healthz {
|
||||
access_log off;
|
||||
add_header Content-Type text/plain;
|
||||
return 200 "ok\n";
|
||||
}
|
||||
|
||||
# Block hidden files and common sensitive paths
|
||||
location ~ /\. {
|
||||
deny all;
|
||||
return 404;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
|
||||
# Custom error pages
|
||||
error_page 404 /index.html;
|
||||
error_page 500 502 503 504 /index.html;
|
||||
}
|
||||
}
|
||||
+794
@@ -0,0 +1,794 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Barcode Studio</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,700;9..144,900&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Barcode libraries (vendored locally — pinned versions, no CDN dependency) -->
|
||||
<script
|
||||
src="vendor/JsBarcode.all.min.js"
|
||||
integrity="sha384-vmcSy8TM1KhZWBIKMKTR8AxbrJQCuConAolGY+42odu9ZGIzw8L8xAT/u7ul4X2U"
|
||||
crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="vendor/bwip-js-min.js"
|
||||
integrity="sha384-33pyXSGFs/ylT0uDwaLiFGZbH9AnIjaVhTWbD3HHFxyS0iGlnUpC5L7Vs/1gA1vw"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--bg: #f1ece4;
|
||||
--bg-2: #e8e2d6;
|
||||
--ink: #14110d;
|
||||
--ink-soft: #3a342b;
|
||||
--accent: #ff4a1c;
|
||||
--accent-2: #1b3aff;
|
||||
--paper: #fbf8f2;
|
||||
--line: #14110d;
|
||||
--rule: rgba(20,17,13,.18);
|
||||
--grain-opacity: .06;
|
||||
}
|
||||
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html,body{background:var(--bg);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:14px;min-height:100vh;overflow-x:hidden}
|
||||
|
||||
/* Paper grain */
|
||||
body::before{
|
||||
content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
|
||||
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
opacity:var(--grain-opacity);mix-blend-mode:multiply;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
header{
|
||||
position:relative;z-index:2;
|
||||
border-bottom:1px solid var(--line);
|
||||
padding:14px 28px;
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
background:var(--bg);
|
||||
}
|
||||
.brand{display:flex;align-items:baseline;gap:14px}
|
||||
.brand-mark{
|
||||
font-family:'Fraunces',serif;font-weight:900;font-size:28px;letter-spacing:-.02em;
|
||||
font-style:italic;
|
||||
}
|
||||
.brand-mark::after{
|
||||
content:'';display:inline-block;width:10px;height:10px;background:var(--accent);margin-left:6px;transform:translateY(-2px);
|
||||
}
|
||||
.brand-sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
|
||||
.meta{display:flex;gap:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
|
||||
.meta span b{color:var(--ink);font-weight:500}
|
||||
.blink{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:6px;animation:pulse 1.6s infinite}
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
|
||||
|
||||
/* ===== Hero strip ===== */
|
||||
.hero{
|
||||
position:relative;z-index:2;
|
||||
border-bottom:1px solid var(--line);
|
||||
padding:42px 28px 36px;
|
||||
display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;
|
||||
background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
|
||||
}
|
||||
.hero h1{
|
||||
font-family:'Fraunces',serif;font-weight:300;
|
||||
font-size:clamp(48px, 7vw, 96px);
|
||||
line-height:.92;letter-spacing:-.035em;
|
||||
}
|
||||
.hero h1 em{font-style:italic;font-weight:500;color:var(--accent)}
|
||||
.hero h1 .strike{text-decoration:line-through;text-decoration-thickness:2px;font-weight:900}
|
||||
.hero-desc{
|
||||
font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:420px;
|
||||
border-left:2px solid var(--accent);padding-left:14px;
|
||||
}
|
||||
.hero-desc b{color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:11px;display:block;margin-bottom:8px}
|
||||
|
||||
/* ===== Main layout ===== */
|
||||
main{
|
||||
position:relative;z-index:2;
|
||||
display:grid;grid-template-columns:360px 1fr;min-height:calc(100vh - 220px);
|
||||
}
|
||||
|
||||
/* ===== Sidebar: format picker ===== */
|
||||
.sidebar{
|
||||
border-right:1px solid var(--line);
|
||||
background:var(--bg);
|
||||
overflow-y:auto;
|
||||
max-height:calc(100vh - 110px);
|
||||
position:sticky;top:0;
|
||||
}
|
||||
.sidebar-head{
|
||||
padding:18px 22px 14px;
|
||||
border-bottom:1px solid var(--rule);
|
||||
display:flex;justify-content:space-between;align-items:baseline;
|
||||
position:sticky;top:0;background:var(--bg);z-index:2;
|
||||
}
|
||||
.sidebar-head h2{
|
||||
font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:18px;
|
||||
}
|
||||
.sidebar-head .count{font-size:10px;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase}
|
||||
|
||||
.group{padding:10px 0;border-bottom:1px solid var(--rule)}
|
||||
.group-title{
|
||||
padding:14px 22px 6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
|
||||
color:var(--ink-soft);display:flex;align-items:center;gap:8px;
|
||||
}
|
||||
.group-title::before{content:'';flex:0 0 14px;height:1px;background:var(--ink-soft)}
|
||||
|
||||
.fmt{
|
||||
padding:11px 22px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
|
||||
transition:background .15s, padding .15s;border-left:3px solid transparent;
|
||||
}
|
||||
.fmt:hover{background:var(--bg-2);padding-left:26px}
|
||||
.fmt.active{background:var(--ink);color:var(--paper);border-left-color:var(--accent)}
|
||||
.fmt.active .fmt-code{color:var(--paper);opacity:.6}
|
||||
.fmt-name{font-size:13px;font-weight:500;letter-spacing:-.005em}
|
||||
.fmt-code{font-size:10px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase}
|
||||
|
||||
/* ===== Workspace ===== */
|
||||
.workspace{padding:28px 32px 80px;background:var(--bg-2);}
|
||||
|
||||
.selected-card{
|
||||
background:var(--paper);
|
||||
border:1px solid var(--line);
|
||||
padding:22px 24px;
|
||||
margin-bottom:24px;
|
||||
display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
|
||||
position:relative;
|
||||
}
|
||||
.selected-card::before{
|
||||
content:'01';position:absolute;top:-10px;left:18px;background:var(--accent);color:var(--paper);
|
||||
font-size:10px;letter-spacing:.2em;padding:2px 8px;font-weight:700;
|
||||
}
|
||||
.selected-meta h3{
|
||||
font-family:'Fraunces',serif;font-weight:500;font-size:32px;letter-spacing:-.02em;margin-bottom:4px;
|
||||
}
|
||||
.selected-meta .selected-type{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
|
||||
.selected-meta p{font-size:12px;line-height:1.65;color:var(--ink-soft);max-width:520px}
|
||||
.selected-spec{
|
||||
font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
|
||||
display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;
|
||||
}
|
||||
.selected-spec b{color:var(--ink);font-weight:500}
|
||||
|
||||
.example-box{
|
||||
width:260px;background:#fff;border:1px solid var(--rule);padding:14px;
|
||||
display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
|
||||
}
|
||||
.example-box::before{
|
||||
content:'EXAMPLE';position:absolute;top:-8px;left:10px;background:var(--paper);
|
||||
font-size:9px;letter-spacing:.22em;color:var(--ink-soft);padding:0 6px;
|
||||
}
|
||||
.example-box canvas, .example-box svg{max-width:100%;height:auto;display:block}
|
||||
.example-box .empty{font-size:10px;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;padding:20px 0}
|
||||
|
||||
/* ===== Input area ===== */
|
||||
.input-section{
|
||||
background:var(--paper);
|
||||
border:1px solid var(--line);
|
||||
padding:22px 24px 24px;
|
||||
margin-bottom:24px;
|
||||
position:relative;
|
||||
}
|
||||
.input-section::before{
|
||||
content:'02';position:absolute;top:-10px;left:18px;background:var(--accent);color:var(--paper);
|
||||
font-size:10px;letter-spacing:.2em;padding:2px 8px;font-weight:700;
|
||||
}
|
||||
.input-head{
|
||||
display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:12px;
|
||||
}
|
||||
.input-head h3{font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:22px;letter-spacing:-.01em}
|
||||
.input-help{font-size:11px;color:var(--ink-soft);letter-spacing:.06em}
|
||||
.input-help kbd{background:var(--bg-2);border:1px solid var(--rule);padding:1px 5px;font-family:inherit;font-size:10px;border-radius:2px}
|
||||
|
||||
textarea{
|
||||
width:100%;min-height:140px;resize:vertical;
|
||||
background:#fff;border:1px solid var(--rule);
|
||||
padding:14px 16px;
|
||||
font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;
|
||||
color:var(--ink);outline:none;transition:border-color .15s, box-shadow .15s;
|
||||
}
|
||||
textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,74,28,.15)}
|
||||
|
||||
.options-row{
|
||||
display:flex;gap:24px;margin-top:16px;flex-wrap:wrap;align-items:center;
|
||||
}
|
||||
.opt{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
|
||||
.opt input[type="checkbox"]{
|
||||
appearance:none;width:14px;height:14px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;position:relative;
|
||||
}
|
||||
.opt input[type="checkbox"]:checked{background:var(--ink)}
|
||||
.opt input[type="checkbox"]:checked::after{
|
||||
content:'';position:absolute;inset:2px;background:var(--accent);
|
||||
}
|
||||
.opt-num{display:flex;align-items:center;gap:6px}
|
||||
.opt-num input{
|
||||
width:60px;background:#fff;border:1px solid var(--rule);padding:4px 8px;
|
||||
font-family:inherit;font-size:11px;color:var(--ink);outline:none;
|
||||
}
|
||||
.opt-num input:focus{border-color:var(--ink)}
|
||||
|
||||
.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
|
||||
button.btn{
|
||||
font-family:'JetBrains Mono',monospace;
|
||||
font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
|
||||
padding:14px 22px;cursor:pointer;border:1px solid var(--ink);
|
||||
transition:all .15s;display:inline-flex;align-items:center;gap:10px;
|
||||
}
|
||||
.btn-primary{background:var(--ink);color:var(--paper)}
|
||||
.btn-primary:hover{background:var(--accent);border-color:var(--accent);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
|
||||
.btn-secondary{background:transparent;color:var(--ink)}
|
||||
.btn-secondary:hover{background:var(--ink);color:var(--paper)}
|
||||
.btn-danger:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
|
||||
|
||||
/* ===== Results ===== */
|
||||
.results-section{
|
||||
background:var(--paper);
|
||||
border:1px solid var(--line);
|
||||
padding:22px 24px 28px;
|
||||
position:relative;min-height:200px;
|
||||
}
|
||||
.results-section::before{
|
||||
content:'03';position:absolute;top:-10px;left:18px;background:var(--accent);color:var(--paper);
|
||||
font-size:10px;letter-spacing:.2em;padding:2px 8px;font-weight:700;
|
||||
}
|
||||
.results-head{
|
||||
display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;flex-wrap:wrap;gap:12px;
|
||||
padding-bottom:12px;border-bottom:1px solid var(--rule);
|
||||
}
|
||||
.results-head h3{font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:22px;letter-spacing:-.01em}
|
||||
.results-stats{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
|
||||
.results-stats b{color:var(--accent);font-weight:700}
|
||||
|
||||
.results-empty{
|
||||
padding:60px 20px;text-align:center;color:var(--ink-soft);
|
||||
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
|
||||
}
|
||||
.results-empty::before{
|
||||
content:'⌗';display:block;font-size:54px;margin-bottom:14px;color:var(--rule);font-family:'Fraunces',serif;
|
||||
}
|
||||
|
||||
.results-grid{
|
||||
display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:18px;
|
||||
}
|
||||
.result-card{
|
||||
background:#fff;border:1px solid var(--rule);padding:18px;
|
||||
display:flex;flex-direction:column;gap:12px;
|
||||
transition:transform .15s, box-shadow .15s;
|
||||
position:relative;
|
||||
}
|
||||
.result-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
|
||||
.result-card .idx{
|
||||
position:absolute;top:8px;right:10px;font-size:9px;letter-spacing:.14em;
|
||||
color:var(--ink-soft);
|
||||
}
|
||||
.result-canvas-wrap{
|
||||
background:#fff;display:flex;align-items:center;justify-content:center;
|
||||
min-height:120px;padding:6px;border:1px dashed var(--rule);
|
||||
}
|
||||
.result-canvas-wrap canvas, .result-canvas-wrap svg{max-width:100%;height:auto;display:block}
|
||||
.result-data{
|
||||
font-size:11px;color:var(--ink-soft);word-break:break-all;
|
||||
border-top:1px solid var(--rule);padding-top:10px;
|
||||
max-height:50px;overflow:hidden;text-overflow:ellipsis;
|
||||
}
|
||||
.result-data b{color:var(--ink);font-weight:500}
|
||||
.result-actions{display:flex;gap:6px}
|
||||
.result-actions button{
|
||||
flex:1;font-family:inherit;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
|
||||
padding:7px 8px;background:transparent;border:1px solid var(--ink);color:var(--ink);cursor:pointer;
|
||||
transition:all .12s;font-weight:700;
|
||||
}
|
||||
.result-actions button:hover{background:var(--ink);color:var(--paper)}
|
||||
.result-error{
|
||||
background:#ffe9e2;border:1px solid var(--accent);color:var(--accent);
|
||||
padding:14px;font-size:11px;line-height:1.55;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast{
|
||||
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
|
||||
background:var(--ink);color:var(--paper);padding:12px 22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
|
||||
z-index:50;transition:transform .3s cubic-bezier(.2,.8,.2,1);
|
||||
border:1px solid var(--accent);
|
||||
}
|
||||
.toast.show{transform:translateX(-50%) translateY(0)}
|
||||
|
||||
/* Footer */
|
||||
footer{
|
||||
border-top:1px solid var(--line);padding:18px 28px;display:flex;justify-content:space-between;align-items:center;
|
||||
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);background:var(--bg);position:relative;z-index:2;
|
||||
}
|
||||
footer .dots{display:flex;gap:4px}
|
||||
footer .dots span{width:6px;height:6px;background:var(--ink);border-radius:50%}
|
||||
footer .dots span:nth-child(2){background:var(--accent)}
|
||||
footer .dots span:nth-child(3){background:var(--accent-2)}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1000px){
|
||||
main{grid-template-columns:1fr}
|
||||
.sidebar{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--line)}
|
||||
.hero{grid-template-columns:1fr;gap:20px}
|
||||
.selected-card{grid-template-columns:1fr}
|
||||
.example-box{width:100%}
|
||||
}
|
||||
@media (max-width: 600px){
|
||||
header{flex-direction:column;gap:10px;align-items:flex-start}
|
||||
.meta{flex-wrap:wrap;gap:10px}
|
||||
.hero{padding:28px 18px}
|
||||
.workspace{padding:18px}
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.sidebar::-webkit-scrollbar{width:8px}
|
||||
.sidebar::-webkit-scrollbar-track{background:transparent}
|
||||
.sidebar::-webkit-scrollbar-thumb{background:var(--ink);border-radius:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="brand">
|
||||
<div class="brand-mark">Barcode Studio · v1.1</div>
|
||||
<div class="brand-sub">J.Vaz 2026</div>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span><span class="blink"></span>System Live</span>
|
||||
<span>Formats <b>22</b></span>
|
||||
<span>Output <b>JPG / PNG</b></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Encode <em>anything</em>.<br><span class="strike">Print</span> everything.</h1>
|
||||
<div class="hero-desc">
|
||||
<b>Studio Manual</b>
|
||||
A precision instrument for converting text and numbers into industrial-grade barcodes.
|
||||
Select a symbology, paste your data line-by-line, and export downloadable JPG images —
|
||||
one per line, or all at once.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- Sidebar: format picker -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-head">
|
||||
<h2>Symbologies</h2>
|
||||
<span class="count" id="formatCount">— FORMATS</span>
|
||||
</div>
|
||||
<div id="formatList"></div>
|
||||
</aside>
|
||||
|
||||
<!-- Workspace -->
|
||||
<div class="workspace">
|
||||
|
||||
<!-- Selected format card -->
|
||||
<div class="selected-card">
|
||||
<div class="selected-meta">
|
||||
<h3 id="selName">—</h3>
|
||||
<div class="selected-type" id="selType">Select a format</div>
|
||||
<p id="selDesc">Pick a symbology from the panel on the left to begin.</p>
|
||||
<div class="selected-spec" id="selSpec"></div>
|
||||
</div>
|
||||
<div class="example-box">
|
||||
<div id="exampleWrap"><div class="empty">Loading…</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input area -->
|
||||
<div class="input-section">
|
||||
<div class="input-head">
|
||||
<h3>Data Input</h3>
|
||||
<div class="input-help">One barcode per line · <kbd>↵</kbd> to add another</div>
|
||||
</div>
|
||||
<textarea id="dataInput" placeholder="Enter your data here…
|
||||
Each line becomes a separate barcode.
|
||||
123456789012
|
||||
HELLO-WORLD
|
||||
https://example.com"></textarea>
|
||||
|
||||
<div class="options-row">
|
||||
<label class="opt">
|
||||
<input type="checkbox" id="optShowText" checked>
|
||||
<span>Show text below</span>
|
||||
</label>
|
||||
<label class="opt opt-num">
|
||||
<span>Scale</span>
|
||||
<input type="number" id="optScale" value="3" min="1" max="10" step="1">
|
||||
</label>
|
||||
<label class="opt opt-num">
|
||||
<span>Quality</span>
|
||||
<input type="number" id="optQuality" value="0.95" min="0.5" max="1" step="0.05">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary" id="btnGenerate">
|
||||
<span>▶</span> Generate Barcodes
|
||||
</button>
|
||||
<button class="btn btn-secondary" id="btnDownloadAll">
|
||||
<span>⬇</span> Download All as JPG
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-danger" id="btnClear">
|
||||
<span>×</span> Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div class="results-section">
|
||||
<div class="results-head">
|
||||
<h3>Output</h3>
|
||||
<div class="results-stats" id="resultsStats">Generated · <b>0</b></div>
|
||||
</div>
|
||||
<div id="results">
|
||||
<div class="results-empty">No barcodes generated yet</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div>Barcode Studio</div>
|
||||
<div class="dots"><span></span><span></span><span></span></div>
|
||||
<div>JPG · PNG · Print-Ready</div>
|
||||
</footer>
|
||||
|
||||
<div class="toast" id="toast">Saved</div>
|
||||
|
||||
<script>
|
||||
/* =========================================================
|
||||
Barcode format definitions
|
||||
========================================================= */
|
||||
const FORMATS = [
|
||||
// ---------- Retail / EAN-UPC family ----------
|
||||
{ id:'ean13', name:'EAN-13', group:'Retail · GS1', engine:'jsbarcode', code:'ean13', example:'5901234123457', desc:'European Article Number — the standard 13-digit retail barcode used on consumer products worldwide.', spec:['Numeric','13 digits','Check digit auto'] },
|
||||
{ id:'ean8', name:'EAN-8', group:'Retail · GS1', engine:'jsbarcode', code:'ean8', example:'96385074', desc:'Compact 8-digit version of EAN-13, used on small packaging where space is limited.', spec:['Numeric','8 digits','Compact'] },
|
||||
{ id:'upca', name:'UPC-A', group:'Retail · GS1', engine:'jsbarcode', code:'upc', example:'036000291452', desc:'Universal Product Code, the dominant retail barcode in North America. 12 digits.', spec:['Numeric','12 digits','USA standard'] },
|
||||
{ id:'upce', name:'UPC-E', group:'Retail · GS1', engine:'jsbarcode', code:'upce', example:'01234565', desc:'Compressed 8-digit UPC variant for small retail items.', spec:['Numeric','8 digits','Compressed'] },
|
||||
{ id:'isbn', name:'ISBN-13', group:'Retail · GS1', engine:'jsbarcode', code:'ean13', example:'9783161484100',desc:'International Standard Book Number — 13-digit barcode for books and periodicals.', spec:['Numeric','13 digits','Books'] },
|
||||
{ id:'gs1databar', name:'GS1 DataBar', group:'Retail · GS1', engine:'bwip', code:'databaromni', example:'(01)24012345678905', desc:'Compact GS1 symbology designed for fresh foods, coupons, and small healthcare items.', spec:['Numeric · 14 digits','GS1 Application Identifier','Omnidirectional'] },
|
||||
{ id:'gs1-128',name:'GS1-128', group:'Retail · GS1', engine:'bwip', code:'gs1-128', example:'(01)12345678901231(17)260101', desc:'GS1 application of Code 128 — used in supply chain, logistics, and shipping. Encodes Application Identifiers.', spec:['Alphanumeric','Variable length','Supply chain'] },
|
||||
|
||||
// ---------- Linear / Industrial ----------
|
||||
{ id:'code128',name:'Code-128', group:'Linear · Industrial', engine:'jsbarcode', code:'CODE128', example:'CIPHER-2026-A1', desc:'High-density linear barcode. Encodes all 128 ASCII characters and is widely used in shipping and packaging.', spec:['ASCII','Variable','High density'] },
|
||||
{ id:'code39', name:'Code-39', group:'Linear · Industrial', engine:'jsbarcode', code:'CODE39', example:'CODE 39 EXAMPLE', desc:'Discrete, self-checking symbology. Encodes 43 characters: A–Z, 0–9, and a few symbols. Common in defense and industry.', spec:['A–Z 0–9','Self-checking','Industrial'] },
|
||||
{ id:'code39e',name:'Code-39 Full ASCII', group:'Linear · Industrial', engine:'bwip', code:'code39ext', example:'Code 39 ext.', desc:'Extended Code-39 that uses paired characters to encode the full 128-character ASCII set.', spec:['Full ASCII','128 chars','Paired encoding'] },
|
||||
{ id:'code93', name:'Code-93', group:'Linear · Industrial', engine:'jsbarcode', code:'CODE93', example:'CODE93EXAMPLE', desc:'Denser successor to Code-39 with two built-in check digits for improved reliability.', spec:['ASCII','2 check digits','Compact'] },
|
||||
{ id:'code11', name:'Code-11', group:'Linear · Industrial', engine:'bwip', code:'code11', example:'0123456789-', desc:'Numeric symbology developed for telecom equipment labeling. High density for digits and dashes.', spec:['0–9 + dash','Telecom','Numeric'] },
|
||||
{ id:'i25', name:'Code 2of5 Interleaved', group:'Linear · Industrial', engine:'jsbarcode', code:'ITF', example:'1234567890', desc:'Interleaved 2 of 5 — efficient numeric-only symbology used in warehousing and ITF-14 cartons.', spec:['Numeric','Even length','Warehouse'] },
|
||||
{ id:'msi', name:'MSI Plessey', group:'Linear · Industrial', engine:'jsbarcode', code:'MSI', example:'1234567', desc:'Modified Plessey code, used historically for inventory and warehouse shelf marking.', spec:['Numeric','Variable','Inventory'] },
|
||||
{ id:'flatter',name:'Flattermarken', group:'Linear · Industrial', engine:'bwip', code:'flattermarken', example:'12345678', desc:'Specialty code used in the print industry to track signatures and folded sections of books.', spec:['Numeric','Print industry','Signatures'] },
|
||||
{ id:'telepen',name:'Telepen Alpha', group:'Linear · Industrial', engine:'bwip', code:'telepen', example:'Telepen', desc:'Full-ASCII linear barcode developed in the UK, common in libraries and academic settings.', spec:['Full ASCII','UK origin','Libraries'] },
|
||||
|
||||
// ---------- Pharma ----------
|
||||
{ id:'pharma1',name:'Pharmacode One-Track', group:'Pharma · Specialty', engine:'bwip', code:'pharmacode', example:'1234', desc:'Pharmaceutical binary code (Laetus). Verifies pharmaceutical packaging during production.', spec:['Numeric 3–131070','Binary bars','Pharma QA'] },
|
||||
{ id:'pharma2',name:'Pharmacode Two-Track', group:'Pharma · Specialty', engine:'bwip', code:'pharmacode2', example:'12345', desc:'Two-track variant of Pharmacode — encodes data using bar height in addition to position.', spec:['Numeric 4–64570','Two heights','Pharma QA'] },
|
||||
|
||||
// ---------- Postal ----------
|
||||
{ id:'kix', name:'Postal · KIX', group:'Postal', engine:'bwip', code:'kix', example:'1234AB56P7', desc:'Dutch PostNL routing code. Encodes postal codes and house numbers for Dutch mail.', spec:['Alphanumeric','Netherlands','Routing'] },
|
||||
|
||||
// ---------- 2D ----------
|
||||
{ id:'qr', name:'QR Code', group:'2D · Matrix', engine:'bwip', code:'qrcode', example:'https://anthropic.com', desc:'Quick Response code. Two-dimensional symbology that encodes large amounts of text, URLs, contacts, or binary data.', spec:['Up to 4 KB','Error correction','Ubiquitous'] },
|
||||
{ id:'dm', name:'Data Matrix', group:'2D · Matrix', engine:'bwip', code:'datamatrix', example:'DataMatrix-Example-2026', desc:'High-density 2D symbology used in electronics, automotive, and aerospace manufacturing.', spec:['Up to 2335 chars','Square / rect','Industrial'] },
|
||||
{ id:'pdf417', name:'PDF417', group:'2D · Matrix', engine:'bwip', code:'pdf417', example:'PDF417 multi-row stacked symbology', desc:'Stacked linear 2D barcode used on ID cards, boarding passes, and shipping labels.', spec:['Up to 1850 chars','Stacked rows','ID & travel'] },
|
||||
];
|
||||
|
||||
/* =========================================================
|
||||
State
|
||||
========================================================= */
|
||||
let currentFormat = FORMATS[0];
|
||||
const generated = []; // {format, data, canvas, error, showText}
|
||||
|
||||
/* =========================================================
|
||||
Render sidebar
|
||||
========================================================= */
|
||||
function renderSidebar(){
|
||||
const list = document.getElementById('formatList');
|
||||
document.getElementById('formatCount').textContent = `${FORMATS.length} FORMATS`;
|
||||
const groups = {};
|
||||
FORMATS.forEach(f => { (groups[f.group] = groups[f.group] || []).push(f); });
|
||||
let html = '';
|
||||
for (const g of Object.keys(groups)){
|
||||
html += `<div class="group"><div class="group-title">${g}</div>`;
|
||||
for (const f of groups[g]){
|
||||
html += `<div class="fmt" data-id="${f.id}">
|
||||
<span class="fmt-name">${f.name}</span>
|
||||
<span class="fmt-code">${f.id}</span>
|
||||
</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
list.innerHTML = html;
|
||||
list.querySelectorAll('.fmt').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
const fmt = FORMATS.find(f => f.id === el.dataset.id);
|
||||
selectFormat(fmt);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Select format & show example
|
||||
========================================================= */
|
||||
function selectFormat(fmt){
|
||||
currentFormat = fmt;
|
||||
document.querySelectorAll('.fmt').forEach(el => el.classList.toggle('active', el.dataset.id === fmt.id));
|
||||
document.getElementById('selName').textContent = fmt.name;
|
||||
document.getElementById('selType').textContent = fmt.group;
|
||||
document.getElementById('selDesc').textContent = fmt.desc;
|
||||
const specHtml = (fmt.spec || []).map(s => `<span><b>·</b> ${s}</span>`).join('');
|
||||
document.getElementById('selSpec').innerHTML = specHtml;
|
||||
|
||||
// Render example
|
||||
const wrap = document.getElementById('exampleWrap');
|
||||
wrap.innerHTML = '';
|
||||
renderBarcode(fmt, fmt.example, wrap, { exampleMode:true })
|
||||
.then(() => {
|
||||
const cap = document.createElement('div');
|
||||
cap.style.cssText = 'font-size:10px;color:var(--ink-soft);letter-spacing:.08em;text-align:center;margin-top:4px;word-break:break-all';
|
||||
cap.innerHTML = `<b style="color:var(--ink)">Sample data:</b> ${escapeHtml(fmt.example)}`;
|
||||
wrap.appendChild(cap);
|
||||
})
|
||||
.catch(err => {
|
||||
wrap.innerHTML = `<div class="empty">Example unavailable</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Core barcode renderer — returns Promise<HTMLCanvasElement>
|
||||
========================================================= */
|
||||
function renderBarcode(fmt, data, container, opts = {}){
|
||||
return new Promise((resolve, reject) => {
|
||||
const scale = opts.exampleMode ? 2 : parseInt(document.getElementById('optScale').value || 3, 10);
|
||||
const showText = (typeof opts.showText === 'boolean')
|
||||
? opts.showText
|
||||
: document.getElementById('optShowText').checked;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
|
||||
try {
|
||||
if (fmt.engine === 'jsbarcode') {
|
||||
let codeData = data;
|
||||
// ISBN: strip any prefix and use EAN13 underneath
|
||||
if (fmt.id === 'isbn'){
|
||||
codeData = data.replace(/[-\s]/g,'');
|
||||
if (codeData.length === 10) {
|
||||
// convert ISBN-10 to ISBN-13
|
||||
const base = '978' + codeData.slice(0,9);
|
||||
let sum = 0;
|
||||
for (let i=0;i<12;i++) sum += (i%2===0 ? 1 : 3) * parseInt(base[i],10);
|
||||
const check = (10 - (sum%10)) % 10;
|
||||
codeData = base + check;
|
||||
}
|
||||
}
|
||||
JsBarcode(canvas, codeData, {
|
||||
format: fmt.code,
|
||||
width: scale * 0.8,
|
||||
height: opts.exampleMode ? 60 : 80,
|
||||
displayValue: showText,
|
||||
font: 'JetBrains Mono',
|
||||
fontSize: opts.exampleMode ? 12 : 14,
|
||||
margin: 8,
|
||||
background: '#ffffff',
|
||||
lineColor: '#14110d'
|
||||
});
|
||||
container.appendChild(canvas);
|
||||
resolve(canvas);
|
||||
return;
|
||||
}
|
||||
|
||||
if (fmt.engine === 'bwip') {
|
||||
// bwip-js renders to canvas
|
||||
const opts2 = {
|
||||
bcid: fmt.code,
|
||||
text: data,
|
||||
scale: opts.exampleMode ? 2 : scale,
|
||||
height: 10,
|
||||
includetext: showText,
|
||||
textxalign: 'center',
|
||||
backgroundcolor: 'FFFFFF',
|
||||
textfont: 'JetBrains Mono',
|
||||
paddingwidth: 4,
|
||||
paddingheight: 4,
|
||||
};
|
||||
// 2D codes don't take height the same way
|
||||
if (['datamatrix','qrcode','pdf417'].includes(fmt.code)) {
|
||||
delete opts2.height;
|
||||
}
|
||||
bwipjs.toCanvas(canvas, opts2);
|
||||
container.appendChild(canvas);
|
||||
resolve(canvas);
|
||||
return;
|
||||
}
|
||||
|
||||
reject(new Error('Unknown engine'));
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Generate all from textarea
|
||||
========================================================= */
|
||||
function generateAll(){
|
||||
const raw = document.getElementById('dataInput').value;
|
||||
const lines = raw.split('\n').map(l => l.trim()).filter(l => l.length > 0);
|
||||
if (lines.length === 0){
|
||||
toast('Enter at least one line of data');
|
||||
return;
|
||||
}
|
||||
const resultsEl = document.getElementById('results');
|
||||
resultsEl.innerHTML = '';
|
||||
generated.length = 0;
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'results-grid';
|
||||
resultsEl.appendChild(grid);
|
||||
|
||||
let successCount = 0;
|
||||
const globalShowText = document.getElementById('optShowText').checked;
|
||||
const promises = lines.map((line, idx) => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'result-card';
|
||||
card.innerHTML = `
|
||||
<span class="idx">#${String(idx+1).padStart(2,'0')}</span>
|
||||
<div class="result-canvas-wrap" data-slot="${idx}"></div>
|
||||
<div class="result-data"><b>${escapeHtml(currentFormat.name)}</b> · ${escapeHtml(line)}</div>
|
||||
<div class="result-actions">
|
||||
<button data-act="toggle" data-idx="${idx}" title="Show/hide text below barcode">${globalShowText ? 'Hide text' : 'Show text'}</button>
|
||||
<button data-act="jpg" data-idx="${idx}">JPG</button>
|
||||
<button data-act="png" data-idx="${idx}">PNG</button>
|
||||
</div>
|
||||
`;
|
||||
grid.appendChild(card);
|
||||
|
||||
const slot = card.querySelector('.result-canvas-wrap');
|
||||
|
||||
return renderBarcode(currentFormat, line, slot, { showText: globalShowText })
|
||||
.then(canvas => {
|
||||
generated[idx] = { format: currentFormat, data: line, canvas, error:null, showText: globalShowText };
|
||||
successCount++;
|
||||
})
|
||||
.catch(err => {
|
||||
slot.innerHTML = `<div class="result-error">⚠ ${escapeHtml(err.message || String(err))}<br><small>Check that your data matches the format requirements.</small></div>`;
|
||||
card.querySelector('.result-actions').style.display = 'none';
|
||||
generated[idx] = { format: currentFormat, data: line, canvas:null, error: err, showText: globalShowText };
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all(promises).then(() => {
|
||||
document.getElementById('resultsStats').innerHTML = `Generated · <b>${successCount}</b> / ${lines.length} · Format <b>${currentFormat.name}</b>`;
|
||||
// Wire action buttons
|
||||
grid.querySelectorAll('button[data-act]').forEach(b => {
|
||||
b.addEventListener('click', () => {
|
||||
const idx = parseInt(b.dataset.idx, 10);
|
||||
const act = b.dataset.act;
|
||||
if (act === 'toggle') {
|
||||
toggleCardText(idx);
|
||||
} else {
|
||||
downloadOne(idx, act);
|
||||
}
|
||||
});
|
||||
});
|
||||
if (successCount > 0) toast(`Generated ${successCount} barcode${successCount>1?'s':''}`);
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Download helpers
|
||||
========================================================= */
|
||||
function canvasToBlob(canvas, type, quality){
|
||||
return new Promise(resolve => canvas.toBlob(resolve, type, quality));
|
||||
}
|
||||
|
||||
function safeName(s){ return s.replace(/[^a-zA-Z0-9_-]/g,'_').slice(0,40) || 'barcode'; }
|
||||
|
||||
function toggleCardText(idx){
|
||||
const item = generated[idx];
|
||||
if (!item || item.error) return;
|
||||
item.showText = !item.showText;
|
||||
// Find the card via the slot's data attribute
|
||||
const slot = document.querySelector(`.result-canvas-wrap[data-slot="${idx}"]`);
|
||||
if (!slot) return;
|
||||
slot.innerHTML = '';
|
||||
renderBarcode(item.format, item.data, slot, { showText: item.showText })
|
||||
.then(canvas => {
|
||||
item.canvas = canvas;
|
||||
const btn = document.querySelector(`button[data-act="toggle"][data-idx="${idx}"]`);
|
||||
if (btn) btn.textContent = item.showText ? 'Hide text' : 'Show text';
|
||||
});
|
||||
}
|
||||
|
||||
async function downloadOne(idx, ext){
|
||||
const item = generated[idx];
|
||||
if (!item || !item.canvas) return;
|
||||
const quality = parseFloat(document.getElementById('optQuality').value || 0.95);
|
||||
if (ext === 'jpg'){
|
||||
// Convert to JPG with white background (canvases may have alpha)
|
||||
const c = document.createElement('canvas');
|
||||
c.width = item.canvas.width;
|
||||
c.height = item.canvas.height;
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0,0,c.width,c.height);
|
||||
ctx.drawImage(item.canvas, 0, 0);
|
||||
const blob = await canvasToBlob(c, 'image/jpeg', quality);
|
||||
saveBlob(blob, `${safeName(item.format.id+'_'+item.data)}.jpg`);
|
||||
} else {
|
||||
const blob = await canvasToBlob(item.canvas, 'image/png');
|
||||
saveBlob(blob, `${safeName(item.format.id+'_'+item.data)}.png`);
|
||||
}
|
||||
}
|
||||
|
||||
function saveBlob(blob, filename){
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url; a.download = filename;
|
||||
document.body.appendChild(a); a.click(); a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||||
}
|
||||
|
||||
async function downloadAll(){
|
||||
const items = generated.filter(g => g && g.canvas);
|
||||
if (items.length === 0){ toast('Nothing to download — generate first'); return; }
|
||||
for (let i=0;i<items.length;i++){
|
||||
await downloadOne(generated.indexOf(items[i]), 'jpg');
|
||||
await new Promise(r => setTimeout(r, 120));
|
||||
}
|
||||
toast(`Downloaded ${items.length} JPG${items.length>1?'s':''}`);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
UI helpers
|
||||
========================================================= */
|
||||
function escapeHtml(s){ return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
|
||||
|
||||
let toastTimer = null;
|
||||
function toast(msg){
|
||||
const t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('show');
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => t.classList.remove('show'), 2200);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Wire up
|
||||
========================================================= */
|
||||
document.getElementById('btnGenerate').addEventListener('click', generateAll);
|
||||
document.getElementById('btnDownloadAll').addEventListener('click', downloadAll);
|
||||
document.getElementById('btnClear').addEventListener('click', () => {
|
||||
document.getElementById('dataInput').value = '';
|
||||
document.getElementById('results').innerHTML = '<div class="results-empty">No barcodes generated yet</div>';
|
||||
document.getElementById('resultsStats').innerHTML = 'Generated · <b>0</b>';
|
||||
generated.length = 0;
|
||||
});
|
||||
|
||||
// Re-render example when options change
|
||||
['optShowText','optScale'].forEach(id => {
|
||||
document.getElementById(id).addEventListener('change', () => selectFormat(currentFormat));
|
||||
});
|
||||
|
||||
// Quick keyboard shortcut: Ctrl/Cmd + Enter to generate
|
||||
document.getElementById('dataInput').addEventListener('keydown', (e) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter'){
|
||||
e.preventDefault();
|
||||
generateAll();
|
||||
}
|
||||
});
|
||||
|
||||
// Init
|
||||
renderSidebar();
|
||||
selectFormat(FORMATS[0]);
|
||||
// Preload example data in textarea
|
||||
document.getElementById('dataInput').value = '5901234123457\n4006381333931\n9780201379624';
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+2
File diff suppressed because one or more lines are too long
Vendored
+70
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user