first commit

This commit is contained in:
Julian Vollmer 2026-03-17 15:33:55 +01:00
commit 53e4216523
3 changed files with 479 additions and 0 deletions

0
README.md Normal file
View File

307
mädelz-etikett.html Normal file
View File

@ -0,0 +1,307 @@
<!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 &nbsp;&nbsp; <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>

172
mädelz-logo.svg Normal file
View File

@ -0,0 +1,172 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<!-- Clip für Bienen-Körperstreifen -->
<clipPath id="bodyClip">
<ellipse cx="250" cy="287" rx="40" ry="52"/>
</clipPath>
<!-- Oberer Textbogen: MÄDELZ -->
<path id="topArc" d="M 80,250 A 170,170 0 0,1 420,250"/>
<!-- Unterer Textbogen: VOM ZIEGENHOF -->
<path id="bottomArc" d="M 75,250 A 175,175 0 0,0 425,250"/>
</defs>
<!-- =============================== -->
<!-- BADGE-RING (von außen nach innen) -->
<!-- =============================== -->
<!-- Äußerster dunkler Ring -->
<circle cx="250" cy="250" r="238" fill="#2C1800"/>
<!-- Cremefarbene Fläche -->
<circle cx="250" cy="250" r="225" fill="#FFF8E7"/>
<!-- Goldene Zierlinien -->
<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"/>
<!-- Haupt-Hintergrund (innen) -->
<circle cx="250" cy="250" r="207" fill="#FFF8E7"/>
<!-- =============================== -->
<!-- WABENMUSTER (subtil, Hintergrund) -->
<!-- =============================== -->
<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>
<!-- =============================== -->
<!-- BIENE komplett (15px nach oben) -->
<!-- =============================== -->
<g transform="translate(0,-25)">
<!-- Linker oberer Flügel -->
<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)"/>
<!-- Rechter oberer Flügel -->
<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)"/>
<!-- Linker unterer Flügel -->
<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)"/>
<!-- Rechter unterer Flügel -->
<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)"/>
<!-- Körper -->
<ellipse cx="250" cy="287" rx="40" ry="52" fill="#F5C030"/>
<!-- Streifen -->
<g clip-path="url(#bodyClip)">
<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>
<!-- Körper-Outline -->
<ellipse cx="250" cy="287" rx="40" ry="52" fill="none" stroke="#2C1800" stroke-width="2"/>
<!-- Kopf -->
<circle cx="250" cy="225" r="29" fill="#F5C030" stroke="#2C1800" stroke-width="2"/>
<!-- Fühler -->
<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"/>
<!-- Augen -->
<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"/>
<!-- Wangen -->
<circle cx="231" cy="233" r="7" fill="#FF6060" opacity="0.30"/>
<circle cx="269" cy="233" r="7" fill="#FF6060" opacity="0.30"/>
<!-- Lächeln -->
<path d="M 241,238 Q 250,247 259,238"
stroke="#2C1800" stroke-width="2.5" fill="none" stroke-linecap="round"/>
</g><!-- Ende Biene -->
<!-- =============================== -->
<!-- ZIERTEXT & TRENNLINIE -->
<!-- =============================== -->
<!-- Name & Imkerei-Label -->
<text x="250" y="344"
font-family="Georgia, 'Palatino Linotype', serif"
font-size="11" font-style="italic"
fill="#8B5500" text-anchor="middle" letter-spacing="3">
Hobbyimkerei
</text>
<text x="250" y="370"
font-family="Georgia, 'Palatino Linotype', serif"
font-size="15" font-weight="bold"
fill="#2C1800" text-anchor="middle" letter-spacing="2">
Christian Koch
</text>
<!-- Trennlinie mit Diamant -->
<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"/>
<!-- Kleine Blüten-Akzente (links & rechts) -->
<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>
<!-- =============================== -->
<!-- ARC-TEXT -->
<!-- =============================== -->
<!-- OBEN: "MÄDELZ" -->
<text font-family="Georgia, 'Palatino Linotype', serif"
font-weight="bold" font-size="36"
fill="#2C1800" letter-spacing="8">
<textPath href="#topArc" startOffset="50%" text-anchor="middle">MÄDELZ</textPath>
</text>
<!-- UNTEN: "VOM ZIEGENHOF · DUDERSTADT" -->
<text font-family="Georgia, 'Palatino Linotype', serif"
font-size="15.5" fill="#8B5500" letter-spacing="1.5">
<textPath href="#bottomArc" startOffset="50%" text-anchor="middle">· · · LANGENHAGEN · · ·</textPath>
</text>
</svg>

After

Width:  |  Height:  |  Size: 6.4 KiB