308 lines
10 KiB
HTML
308 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Mädelz Honigetikett – Christian Koch</title>
|
||
<style>
|
||
/* ==============================
|
||
DRUCK-EINSTELLUNGEN
|
||
Drucken mit: 100% Skalierung,
|
||
Ränder auf 0 / "Keine"
|
||
============================== */
|
||
@page {
|
||
size: A4;
|
||
margin: 15mm;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: Georgia, 'Palatino Linotype', serif;
|
||
background: #e8e0d0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6mm;
|
||
padding: 10mm;
|
||
justify-content: flex-start;
|
||
align-content: flex-start;
|
||
}
|
||
|
||
/* Ein einzelnes Etikett: 90 × 65 mm */
|
||
.label {
|
||
width: 90mm;
|
||
height: 65mm;
|
||
background: #FFF8E7;
|
||
border: 2.5px solid #2C1800;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
/* Goldener Innenrahmen */
|
||
.label::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 3px;
|
||
border: 1px solid #C17A00;
|
||
border-radius: 2px;
|
||
pointer-events: none;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* Subtiles Wabenmuster als Hintergrund */
|
||
.label::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='17.3'%3E%3Cpolygon points='10,1 19,5.65 19,14.65 10,19.3 1,14.65 1,5.65' fill='none' stroke='%23C17A00' stroke-width='0.4' opacity='0.18'/%3E%3C/svg%3E");
|
||
background-size: 20px 17.3px;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* ---- LOGO-BEREICH ---- */
|
||
.logo-area {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 36mm;
|
||
height: 36mm;
|
||
margin-top: 2mm;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.logo-area svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* ---- TRENNLINIE ---- */
|
||
.divider {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 78mm;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2mm;
|
||
margin: 1mm 0 1.5mm;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.divider-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
background: #C17A00;
|
||
}
|
||
|
||
.divider-diamond {
|
||
width: 5px;
|
||
height: 5px;
|
||
background: #C17A00;
|
||
transform: rotate(45deg);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ---- INFOSBEREICH ---- */
|
||
.info {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 82mm;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.7mm;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sorte {
|
||
font-size: 8.5pt;
|
||
font-weight: bold;
|
||
color: #2C1800;
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
border-bottom: 1px dashed #C17A00;
|
||
padding-bottom: 0.5mm;
|
||
min-width: 50mm;
|
||
text-align: center;
|
||
}
|
||
|
||
.sorte-placeholder {
|
||
color: #aaa;
|
||
font-style: italic;
|
||
font-weight: normal;
|
||
font-size: 7pt;
|
||
letter-spacing: 0;
|
||
text-transform: none;
|
||
}
|
||
|
||
.details-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 4mm;
|
||
font-size: 7pt;
|
||
color: #5a3a00;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.details-row span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1mm;
|
||
}
|
||
|
||
.details-row .dot {
|
||
color: #C17A00;
|
||
font-size: 8pt;
|
||
}
|
||
|
||
.producer {
|
||
font-size: 7pt;
|
||
color: #2C1800;
|
||
letter-spacing: 0.8px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.address {
|
||
font-size: 6.5pt;
|
||
color: #7a5500;
|
||
letter-spacing: 0.3px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.herkunft {
|
||
font-size: 6pt;
|
||
color: #8B5500;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
margin-top: 0.3mm;
|
||
}
|
||
|
||
/* Drucken: weißer Hintergrund, kein Body-Hintergrund */
|
||
@media print {
|
||
body {
|
||
background: white;
|
||
padding: 0;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Etikett-Vorlage (6× auf A4 = 2 Spalten × 3 Zeilen) -->
|
||
|
||
<!-- Etikett 1 -->
|
||
<div class="label">
|
||
<div class="logo-area">
|
||
<!-- MÄDELZ Logo eingebettet -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||
<defs>
|
||
<clipPath id="bodyClip1"><ellipse cx="250" cy="287" rx="40" ry="52"/></clipPath>
|
||
<path id="topArc1" d="M 80,250 A 170,170 0 0,1 420,250"/>
|
||
<path id="bottomArc1" d="M 75,250 A 175,175 0 0,0 425,250"/>
|
||
</defs>
|
||
<circle cx="250" cy="250" r="238" fill="#2C1800"/>
|
||
<circle cx="250" cy="250" r="225" fill="#FFF8E7"/>
|
||
<circle cx="250" cy="250" r="218" fill="none" stroke="#C17A00" stroke-width="2.5"/>
|
||
<circle cx="250" cy="250" r="212" fill="none" stroke="#C17A00" stroke-width="1"/>
|
||
<circle cx="250" cy="250" r="207" fill="#FFF8E7"/>
|
||
<g opacity="0.09" stroke="#B8690A" stroke-width="1.5" fill="none">
|
||
<polygon points="250,128 265,137 265,155 250,164 235,155 235,137"/>
|
||
<polygon points="280,146 295,155 295,173 280,182 265,173 265,155"/>
|
||
<polygon points="220,146 235,155 235,173 220,182 205,173 205,155"/>
|
||
<polygon points="250,164 265,173 265,191 250,200 235,191 235,173"/>
|
||
<polygon points="280,182 295,191 295,209 280,218 265,209 265,191"/>
|
||
<polygon points="220,182 235,191 235,209 220,218 205,209 205,191"/>
|
||
</g>
|
||
<g transform="translate(0,-25)">
|
||
<ellipse cx="206" cy="255" rx="37" ry="21" fill="rgba(200,230,255,0.70)" stroke="#88AACC" stroke-width="1.5" transform="rotate(-24,206,255)"/>
|
||
<ellipse cx="294" cy="255" rx="37" ry="21" fill="rgba(200,230,255,0.70)" stroke="#88AACC" stroke-width="1.5" transform="rotate(24,294,255)"/>
|
||
<ellipse cx="213" cy="279" rx="25" ry="13" fill="rgba(200,230,255,0.52)" stroke="#88AACC" stroke-width="1" transform="rotate(-8,213,279)"/>
|
||
<ellipse cx="287" cy="279" rx="25" ry="13" fill="rgba(200,230,255,0.52)" stroke="#88AACC" stroke-width="1" transform="rotate(8,287,279)"/>
|
||
<ellipse cx="250" cy="287" rx="40" ry="52" fill="#F5C030"/>
|
||
<g clip-path="url(#bodyClip1)">
|
||
<rect x="210" y="269" width="80" height="13" fill="#2C1800"/>
|
||
<rect x="210" y="286" width="80" height="13" fill="#2C1800"/>
|
||
<rect x="210" y="303" width="80" height="13" fill="#2C1800"/>
|
||
<rect x="210" y="320" width="80" height="10" fill="#2C1800"/>
|
||
</g>
|
||
<ellipse cx="250" cy="287" rx="40" ry="52" fill="none" stroke="#2C1800" stroke-width="2"/>
|
||
<circle cx="250" cy="225" r="29" fill="#F5C030" stroke="#2C1800" stroke-width="2"/>
|
||
<path d="M 240,198 C 233,183 223,172 216,166" stroke="#2C1800" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||
<path d="M 260,198 C 267,183 277,172 284,166" stroke="#2C1800" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||
<circle cx="214" cy="163" r="5.5" fill="#F5C030" stroke="#2C1800" stroke-width="1.8"/>
|
||
<circle cx="286" cy="163" r="5.5" fill="#F5C030" stroke="#2C1800" stroke-width="1.8"/>
|
||
<circle cx="241" cy="221" r="5.5" fill="#2C1800"/>
|
||
<circle cx="259" cy="221" r="5.5" fill="#2C1800"/>
|
||
<circle cx="242.5" cy="219" r="2" fill="white"/>
|
||
<circle cx="260.5" cy="219" r="2" fill="white"/>
|
||
<circle cx="231" cy="233" r="7" fill="#FF6060" opacity="0.30"/>
|
||
<circle cx="269" cy="233" r="7" fill="#FF6060" opacity="0.30"/>
|
||
<path d="M 241,238 Q 250,247 259,238" stroke="#2C1800" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||
</g>
|
||
<text font-family="Georgia,serif" font-size="11" font-style="italic" fill="#8B5500" text-anchor="middle" letter-spacing="3" x="250" y="344">Hobbyimkerei</text>
|
||
<text font-family="Georgia,serif" font-size="15" font-weight="bold" fill="#2C1800" text-anchor="middle" letter-spacing="2" x="250" y="370">Christian Koch</text>
|
||
<line x1="112" y1="384" x2="200" y2="384" stroke="#C17A00" stroke-width="1.5"/>
|
||
<line x1="300" y1="384" x2="388" y2="384" stroke="#C17A00" stroke-width="1.5"/>
|
||
<polygon points="250,378 257,384 250,390 243,384" fill="#C17A00"/>
|
||
<g fill="#4A6B35" opacity="0.60">
|
||
<circle cx="130" cy="268" r="4.5"/><circle cx="122" cy="259" r="3.5"/><circle cx="138" cy="259" r="3.5"/>
|
||
<circle cx="117" cy="271" r="3"/><circle cx="143" cy="271" r="3"/><rect x="129" y="272" width="2" height="15" rx="1"/>
|
||
</g>
|
||
<g fill="#4A6B35" opacity="0.60">
|
||
<circle cx="370" cy="268" r="4.5"/><circle cx="362" cy="259" r="3.5"/><circle cx="378" cy="259" r="3.5"/>
|
||
<circle cx="357" cy="271" r="3"/><circle cx="383" cy="271" r="3"/><rect x="369" y="272" width="2" height="15" rx="1"/>
|
||
</g>
|
||
<text font-family="Georgia,serif" font-weight="bold" font-size="36" fill="#2C1800" letter-spacing="8">
|
||
<textPath href="#topArc1" startOffset="50%" text-anchor="middle">MÄDELZ</textPath>
|
||
</text>
|
||
<text font-family="Georgia,serif" font-size="15.5" fill="#8B5500" letter-spacing="1.5">
|
||
<textPath href="#bottomArc1" startOffset="50%" text-anchor="middle">· · · LANGENHAGEN · · ·</textPath>
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Trennlinie -->
|
||
<div class="divider">
|
||
<div class="divider-line"></div>
|
||
<div class="divider-diamond"></div>
|
||
<div class="divider-line"></div>
|
||
</div>
|
||
|
||
<!-- Pflichtangaben -->
|
||
<div class="info">
|
||
<div class="sorte">
|
||
Honig – <span class="sorte-placeholder">Sorte eintragen</span>
|
||
</div>
|
||
<div class="details-row">
|
||
<span>Netto 500 g</span>
|
||
<span class="dot">◆</span>
|
||
<span>MHD: _________</span>
|
||
<span class="dot">◆</span>
|
||
<span>Ernte: _____</span>
|
||
</div>
|
||
<div class="producer">Christian Koch · Hobbyimkerei</div>
|
||
<div class="address">Langenhagen · Deutschland</div>
|
||
<div class="herkunft">✦ Erzeugt in Deutschland ✦</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Weitere 5 identische Etiketten für A4-Bogen -->
|
||
<script>
|
||
const template = document.querySelector('.label');
|
||
for (let i = 1; i < 6; i++) {
|
||
const clone = template.cloneNode(true);
|
||
// Unique IDs für SVG-Referenzen
|
||
clone.querySelectorAll('[id]').forEach(el => el.id = el.id.replace('1', i+1));
|
||
clone.querySelectorAll('[href]').forEach(el => el.setAttribute('href', el.getAttribute('href').replace('1', i+1)));
|
||
clone.querySelectorAll('[clip-path]').forEach(el => el.setAttribute('clip-path', el.getAttribute('clip-path').replace('1', i+1)));
|
||
document.body.appendChild(clone);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|