From 373e19a515d0a06086f579232b57331dce04e5ba Mon Sep 17 00:00:00 2001 From: knuthtimo-lab Date: Wed, 21 Jan 2026 08:19:53 +0100 Subject: [PATCH] barcode --- package-lock.json | 20 + package.json | 3 +- src/app/(marketing)/MarketingLayout.tsx | 4 +- .../BarcodeGeneratorClient.tsx | 351 ++++++++++++++++++ .../tools/barcode-generator/page.tsx | 339 +++++++++++++++++ .../tools/url-qr-code/URLGenerator.tsx | 2 +- src/app/(marketing-de)/MarketingDeLayout.tsx | 4 +- .../(marketing-de)/qr-code-erstellen/page.tsx | 4 + src/app/sitemap.ts | 1 + src/components/marketing/FreeToolsGrid.tsx | 11 +- src/components/marketing/RelatedTools.tsx | 5 +- src/middleware.ts | 1 + 12 files changed, 738 insertions(+), 7 deletions(-) create mode 100644 src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx create mode 100644 src/app/(marketing)/tools/barcode-generator/page.tsx diff --git a/package-lock.json b/package-lock.json index 5334084..0815427 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "qrcode": "^1.5.3", "qrcode.react": "^3.1.0", "react": "^18.2.0", + "react-barcode": "^1.6.1", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", @@ -6555,6 +6556,12 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsbarcode": { + "version": "3.12.3", + "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.12.3.tgz", + "integrity": "sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==", + "license": "MIT" + }, "node_modules/jsesc": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", @@ -8075,6 +8082,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-barcode": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/react-barcode/-/react-barcode-1.6.1.tgz", + "integrity": "sha512-pc4ftnO5syHa/UjCruEeRsomlhoxKSugIgTA8T4dH0fvc89UMHL+/1Sp25IAphqG44pJkE5hMXhv89iS09jQyw==", + "license": "ISC", + "dependencies": { + "jsbarcode": "^3.8.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "16 - 19" + } + }, "node_modules/react-chartjs-2": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.1.tgz", diff --git a/package.json b/package.json index 718566c..8f8ff26 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "qrcode": "^1.5.3", "qrcode.react": "^3.1.0", "react": "^18.2.0", + "react-barcode": "^1.6.1", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", @@ -90,4 +91,4 @@ "engines": { "node": ">=18.0.0" } -} \ No newline at end of file +} diff --git a/src/app/(marketing)/MarketingLayout.tsx b/src/app/(marketing)/MarketingLayout.tsx index 4265d4f..a45fabf 100644 --- a/src/app/(marketing)/MarketingLayout.tsx +++ b/src/app/(marketing)/MarketingLayout.tsx @@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation'; import { Button } from '@/components/ui/Button'; import { Footer } from '@/components/ui/Footer'; import en from '@/i18n/en.json'; -import { ChevronDown, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users } from 'lucide-react'; +import { ChevronDown, Wifi, Contact, MessageCircle, QrCode, Link2, Type, Mail, MessageSquare, Phone, Calendar, MapPin, Facebook, Instagram, Twitter, Youtube, Music, Bitcoin, CreditCard, Video, Users, Barcode as BarcodeIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; import { AnimatePresence, motion } from 'framer-motion'; @@ -62,6 +62,7 @@ export default function MarketingLayout({ { name: 'PayPal', description: 'Receive payments', href: '/tools/paypal-qr-code', icon: CreditCard, color: 'text-blue-700', bgColor: 'bg-blue-50' }, { name: 'Zoom', description: 'Join Zoom meeting', href: '/tools/zoom-qr-code', icon: Video, color: 'text-sky-500', bgColor: 'bg-sky-50' }, { name: 'Teams', description: 'Join Teams meeting', href: '/tools/teams-qr-code', icon: Users, color: 'text-violet-500', bgColor: 'bg-violet-50' }, + { name: 'Barcode', description: 'Generate barcodes', href: '/tools/barcode-generator', icon: BarcodeIcon, color: 'text-slate-800', bgColor: 'bg-slate-100' }, ]; return ( @@ -96,6 +97,7 @@ export default function MarketingLayout({
  • PayPal QR Code
  • Zoom QR Code
  • Teams QR Code
    • +
  • Barcode Generator
    • diff --git a/src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx b/src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx new file mode 100644 index 0000000..b78d917 --- /dev/null +++ b/src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx @@ -0,0 +1,351 @@ +'use client'; + +import React, { useState, useRef } from 'react'; +import Barcode from 'react-barcode'; +import Link from 'next/link'; +import { Download, Printer, Barcode as BarcodeIcon, Sparkles, Sliders, Check, Info } from 'lucide-react'; +import { Button } from '@/components/ui/Button'; +import { Input } from '@/components/ui/Input'; +import { Select } from '@/components/ui/Select'; +import { showToast } from '@/components/ui/Toast'; +import { cn } from '@/lib/utils'; +import { toPng, toSvg } from 'html-to-image'; + +// Brand Colors +const BRAND = { + paleGrey: '#EBEBDF', + slate900: '#0f172a', +}; + +const BARCODE_COLORS = [ + { name: 'Classic Black', value: '#000000' }, + { name: 'Dark Blue', value: '#1A1265' }, + { name: 'Rich Indigo', value: '#4338CA' }, + { name: 'Deep Emerald', value: '#065F46' }, + { name: 'Crimson', value: '#991B1B' }, + { name: 'Slate Gray', value: '#334155' }, + { name: 'Business Navy', value: '#1E293B' }, +]; + +const FRAME_OPTIONS = [ + { id: 'none', label: 'No Frame' }, + { id: 'scanme', label: 'Scan Me' }, + { id: 'product', label: 'Product' }, + { id: 'serial', label: 'Serial' }, +]; + +const FORMAT_INFO: Record = { + 'CODE128': 'High-density alphanumeric format. Best for general purpose use.', + 'EAN13': 'International retail standard for products worldwide.', + 'UPC': 'Standard retail format used primarily in North America.', + 'CODE39': 'Older industrial standard supporting uppercase letters and numbers.', + 'ITF14': 'Used on shipping containers and logistics packaging.', + 'MSI': 'Specialized format for retail shelf labeling and inventory.', + 'pharmacode': 'Pharmaceutical packaging control standard.', +}; + +export default function BarcodeGeneratorClient() { + const [value, setValue] = useState('123456789'); + const [format, setFormat] = useState('CODE128'); + const [width, setWidth] = useState(2); + const [height, setHeight] = useState(100); + const [displayValue, setDisplayValue] = useState(true); + const [lineColor, setLineColor] = useState('#000000'); + const [frameType, setFrameType] = useState('none'); + + const barcodeRef = useRef(null); + + const downloadBarcode = async (extension: 'png' | 'svg') => { + if (!barcodeRef.current) return; + + try { + let dataUrl; + if (extension === 'png') { + dataUrl = await toPng(barcodeRef.current, { + backgroundColor: '#ffffff', + pixelRatio: 3, + }); + } else { + dataUrl = await toSvg(barcodeRef.current, { + backgroundColor: '#ffffff', + }); + } + + const link = document.createElement('a'); + link.href = dataUrl; + link.download = `barcode-${value || 'generator'}.${extension}`; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + showToast(`Barcode downloaded as ${extension.toUpperCase()}`, 'success'); + } catch (err) { + console.error('Download failed', err); + showToast('Download failed', 'error'); + } + }; + + const formats = [ + { value: 'CODE128', label: 'Code 128 (Standard)' }, + { value: 'EAN13', label: 'EAN-13 (Retail)' }, + { value: 'UPC', label: 'UPC-A (US Retail)' }, + { value: 'CODE39', label: 'Code 39' }, + { value: 'ITF14', label: 'ITF-14' }, + { value: 'MSI', label: 'MSI' }, + { value: 'pharmacode', label: 'Pharmacode' }, + ]; + + return ( +
    + + {/* Main Generator Card */} +
    +
    + + {/* LEFT: Input Section */} +
    + + {/* Configuration */} +
    +

    + + Configuration +

    + +
    +
    + + setValue(e.target.value)} + placeholder="Enter barcode data (e.g. 12345678)" + className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900" + /> +
    + +
    +
    + +
    + +
    +

    Format Guide:

    +

    {FORMAT_INFO[format]}

    +
    +
    +
    + setWidth(parseFloat(e.target.value))} + className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" + /> +
    + +
    +
    + + {height}px +
    + setHeight(parseInt(e.target.value))} + className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" + /> +
    +
    + +
    + +
    + {BARCODE_COLORS.map((c) => ( + + ))} +
    +
    + +
    + +
    + {FRAME_OPTIONS.map((frame) => ( + + ))} +
    +
    + + + +
    +
    + + {/* RIGHT: Preview Section */} +
    + + {/* Barcode Card */} +
    +
    +
    + Live Preview +
    +
    + +
    + {frameType !== 'none' && ( +
    + {FRAME_OPTIONS.find(f => f.id === frameType)?.label} +
    + )} + {value ? ( + + ) : ( +
    + +

    Enter data to generate

    +
    + )} +
    + + {/* Info Preview */} +
    +

    + {formats.find(f => f.value === format)?.label} +

    +
    + {value || 'Barcode Value'} +
    +
    +
    + + {/* Download Buttons */} +
    + + + +
    +
    +
    +
    + + {/* Upsell Banner */} +
    +
    +

    Need Dynamic QR Codes?

    +

    + Switch to QR codes to edit content later and track your scans. +

    +
    + + + +
    +
    + ); +} diff --git a/src/app/(marketing)/tools/barcode-generator/page.tsx b/src/app/(marketing)/tools/barcode-generator/page.tsx new file mode 100644 index 0000000..3a8635b --- /dev/null +++ b/src/app/(marketing)/tools/barcode-generator/page.tsx @@ -0,0 +1,339 @@ + +import React from 'react'; +import type { Metadata } from 'next'; +import BarcodeGeneratorClient from './BarcodeGeneratorClient'; +import { Barcode as BarcodeIcon, Shield, Zap, Printer, Download, Share2, Sparkles, Sliders, Check } from 'lucide-react'; +import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema'; +import { RelatedTools } from '@/components/marketing/RelatedTools'; +import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils'; + +// SEO Optimized Metadata +export const metadata: Metadata = { + title: { + absolute: 'Free Online Barcode Generator | Create EAN, UPC, Code 128 | QR Master', + }, + description: 'Create professional, printable barcodes instantly. Erstelle EAN, UPC & Code 128 Barcodes kostenlos. Download as PNG or SVG. No sign-up required.', + keywords: ['barcode generator', 'online barcode maker', 'create barcode free', 'ean-13 generator', 'upc-a generator', 'code 128 generator', 'barcode creator', 'printable barcodes'], + alternates: { + canonical: 'https://www.qrmaster.net/tools/barcode-generator', + }, + openGraph: { + title: 'Free Online Barcode Generator | QR Master', + description: 'Generate custom printable barcodes instantly. Supports EAN, UPC, Code 128.', + url: 'https://www.qrmaster.net/tools/barcode-generator', + siteName: 'QR Master', + locale: 'en_US', + type: 'website', + images: [{ url: '/og-barcode-generator.png', width: 1200, height: 630 }], + }, + twitter: { + card: 'summary_large_image', + title: 'Free Online Barcode Generator', + description: 'Create custom barcodes in seconds. Download high-quality PNG/SVG.', + }, + robots: { + index: true, + follow: true, + }, +}; + +// JSON-LD Structured Data +const jsonLd = { + '@context': 'https://schema.org', + '@graph': [ + generateSoftwareAppSchema( + 'Barcode Generator', + 'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.', + '/og-barcode-generator.png', + 'UtilitiesApplication' + ), + { + '@type': 'HowTo', + name: 'How to Create a Barcode', + description: 'Create custom barcodes for products or inventory.', + step: [ + { + '@type': 'HowToStep', + position: 1, + name: 'Enter Content', + text: 'Type or paste the numeric or alphanumeric data for your barcode.', + }, + { + '@type': 'HowToStep', + position: 2, + name: 'Select Format', + text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).', + }, + { + '@type': 'HowToStep', + position: 3, + name: 'Customize Design', + text: 'Adjust the height and width of the barcode to fit your needs.', + }, + { + '@type': 'HowToStep', + position: 4, + name: 'Toggle Text', + text: 'Decide if you want the human-readable value to appear below the barcode.', + }, + { + '@type': 'HowToStep', + position: 5, + name: 'Download & Print', + text: 'Save your barcode as PNG or SVG and print it for labels or inventory.', + }, + ], + totalTime: 'PT20S', + }, + generateFaqSchema({ + 'What is the best barcode format for general use?': { + question: 'What is the best barcode format for general use?', + answer: 'Code 128 is the most versatile format and is highly recommended for inventory and internal tracking as it supports both numbers and letters.', + }, + 'Which format should I use for retail?': { + question: 'Which format should I use for retail?', + answer: 'EAN-13 is the standard for retail products in Europe and worldwide, while UPC-A is the standard for retail in North America.', + }, + 'Is this barcode generator free?': { + question: 'Is this barcode generator free?', + answer: 'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required.', + }, + 'Can I download barcodes in vector format?': { + question: 'Can I download barcodes in vector format?', + answer: 'Yes, you can download your barcodes as SVG (Scalable Vector Graphics), which is ideal for high-quality printing without loss of resolution.', + }, + 'Do these barcodes work with any scanner?': { + question: 'Do these barcodes work with any scanner?', + answer: 'Yes, we generate standard-compliant barcodes that are universally readable by any standard optical or laser barcode scanner.', + }, + }), + ], +}; + +export default function BarcodeGeneratorPage() { + return ( + <> +