<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPOE Card Grading Label Generator</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.5.3/qrcode.min.js"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1>SPOE Card Grading System</h1>
<nav class="nav">
<button class="btn btn--primary" id="labelGeneratorBtn">Label Generator</button>
<button class="btn btn--secondary" id="myLabelsBtn">Meine Labels</button>
<button class="btn btn--secondary" id="reportSearchBtn">Report Suche</button>
<button class="btn btn--secondary" id="dashboardBtn">Dashboard</button>
</nav>
</header>
<!-- Label Generator Section -->
<section id="labelGenerator" class="section">
<h2>SPOE Label Generator</h2>
<div class="generator-layout">
<div class="generator-form">
<form id="labelForm" class="card-form">
<h3>Kartendaten</h3>
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="cardYear">Jahr*</label>
<input type="number" id="cardYear" class="form-control" min="1990" max="2025" value="2003" required>
</div>
<div class="form-group">
<label class="form-label" for="setName">Set-Name*</label>
<input type="text" id="setName" class="form-control" value="TOPPS CHROME" required>
</div>
<div