tau_rag/scripts/generate_diy_html_embedded.py

from __future__ import annotations

from base64 import b64encode
from pathlib import Path


ROOT = Path("/Users/avrahambarzel/Library/Mobile Documents/com~apple~CloudDocs/TAU_API/photoelectric-real/backend/tau_platform_v4/tau_rag")
OUT = ROOT / "outputs"
ASSETS = OUT / "diy_kit_html_assets"


COMPONENT_ROWS = [
    ("1", "LM393", "IC1", "DIP-8", "1"),
    ("2", "בית שבב", "IC1", "DIP-8", "1"),
    ("3", "קבל אלקטרוליטי", "C1, C2", "100uF", "2"),
    ("4", "פוטנציומטר", "R1, R2", "103 10K", "2"),
    ("5", "נגד שכבת מתכת", "R5, R6, R11, R12", "51ohm", "4"),
    ("6", "נגד שכבת מתכת", "R7, R8", "1K", "2"),
    ("7", "נגד שכבת מתכת", "R9, R10", "10ohm", "2"),
    ("8", "נגד תלוי אור", "R13, R14", "CDS5", "2"),
    ("9", "LED אדום", "D1, D2", "5mm", "2"),
    ("10", "LED לבן", "D4, D5", "5mm", "2"),
    ("11", "טרנזיסטור S8550", "Q1, Q2", "TO-92", "2"),
    ("12", "מתג נעילה", "S1", "6×6mm", "1"),
    ("13", "מנוע DC", "M1, M2", "JD3-100", "2"),
    ("14", "גלגל", "/", "24mm", "2"),
    ("15", "צמיג", "/", "24mm", "2"),
    ("16", "ציר", "/", "D2×30mm", "2"),
    ("17", "מרווח פלסטיק", "/", "D2.0mm", "6"),
    ("18", "שרוול תלת-כיווני", "/", "D2.5mm", "4"),
    ("19", "גלגל שיניים", "/", "D22mm", "2"),
    ("20", "תולעת", "/", "D5mm", "2"),
    ("21", "בורג", "/", "D2.2×8mm", "4"),
    ("22", "בורג מנוע שחור", "/", "D1.7×4mm", "4"),
    ("23", "בורג", "/", "M5×20mm", "1"),
    ("24", "אום", "/", "M5", "1"),
    ("25", "אום כיפה", "/", "M5", "1"),
    ("26", "כבל", "/", "6cm", "4"),
    ("27", "בית סוללות", "/", "AA×2", "1"),
    ("28", "PCB", "/", "104×72mm", "1"),
]

GERMAN_ROWS = [
    ("1", "LM393", "IC1", "DIP-8", "1"),
    ("2", "IC-Sockel", "IC1", "DIP-8", "1"),
    ("3", "Elektrolytkondensator", "C1, C2", "100uF", "2"),
    ("4", "Potentiometer", "R1, R2", "103 10K", "2"),
    ("5", "Metallschichtwiderstand", "R5, R6, R11, R12", "51ohm", "4"),
    ("6", "Metallschichtwiderstand", "R7, R8", "1K", "2"),
    ("7", "Metallschichtwiderstand", "R9, R10", "10ohm", "2"),
    ("8", "Fotowiderstand", "R13, R14", "CDS5", "2"),
    ("9", "Rote LED", "D1, D2", "5mm", "2"),
    ("10", "Weiße LED", "D4, D5", "5mm", "2"),
    ("11", "S8550-Transistor", "Q1, Q2", "TO-92", "2"),
    ("12", "Rastschalter", "S1", "6×6mm", "1"),
    ("13", "DC-Motor", "M1, M2", "JD3-100", "2"),
    ("14", "Rad", "/", "24mm", "2"),
    ("15", "Reifen", "/", "24mm", "2"),
    ("16", "Achse", "/", "D2×30mm", "2"),
    ("17", "Kunststoff-Abstandshalter", "/", "D2.0mm", "6"),
    ("18", "Dreifachhülse", "/", "D2.5mm", "4"),
    ("19", "Zahnrad", "/", "D22mm", "2"),
    ("20", "Schnecke", "/", "D5mm", "2"),
    ("21", "Schraube", "/", "D2.2×8mm", "4"),
    ("22", "Motor-Schraube schwarz", "/", "D1.7×4mm", "4"),
    ("23", "Schraube", "/", "M5×20mm", "1"),
    ("24", "Mutter", "/", "M5", "1"),
    ("25", "Hutmutter", "/", "M5", "1"),
    ("26", "Kabel", "/", "6cm", "4"),
    ("27", "Batteriehalter", "/", "AA×2", "1"),
    ("28", "PCB", "/", "104×72mm", "1"),
]


def png_data(name: str) -> str:
    data = (ASSETS / name).read_bytes()
    return f"data:image/png;base64,{b64encode(data).decode('ascii')}"


def base_css(direction: str, align: str, border_side: str) -> str:
    return f"""
    :root {{
      --bg: #f6f1e8;
      --paper: #fffdf8;
      --ink: #1f2937;
      --muted: #5b6470;
      --line: #d9cfbf;
      --accent: #c5462f;
      --accent-2: #256f8f;
      --shadow: 0 18px 50px rgba(68, 48, 23, 0.12);
      --radius: 24px;
    }}
    * {{ box-sizing: border-box; }}
    body {{
      margin: 0;
      font-family: Arial, sans-serif;
      direction: {direction};
      background:
        radial-gradient(circle at top left, rgba(197, 70, 47, 0.08), transparent 24rem),
        radial-gradient(circle at top right, rgba(37, 111, 143, 0.08), transparent 26rem),
        linear-gradient(180deg, #f8f4ec 0%, var(--bg) 100%);
      color: var(--ink);
      line-height: 1.7;
    }}
    .shell {{ width: min(1160px, calc(100% - 32px)); margin: 24px auto 64px; }}
    .hero {{
      background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,250,242,0.92));
      border: 1px solid rgba(217, 207, 191, 0.9);
      border-radius: 32px;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }}
    .hero::before {{
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(197, 70, 47, 0.08), transparent 34%),
        linear-gradient(300deg, rgba(37, 111, 143, 0.08), transparent 35%);
      pointer-events: none;
    }}
    .hero-grid {{
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 28px;
      padding: 34px;
      align-items: center;
      position: relative;
      z-index: 1;
    }}
    .eyebrow {{
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(37, 111, 143, 0.09);
      color: var(--accent-2);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }}
    h1, h2, h3 {{ margin: 0 0 12px; line-height: 1.2; }}
    h1 {{ font-size: clamp(32px, 5vw, 54px); margin-top: 14px; }}
    h2 {{ font-size: clamp(24px, 3vw, 32px); }}
    h3 {{ font-size: 22px; }}
    .lead {{ font-size: 18px; color: var(--muted); max-width: 62ch; margin: 0 0 22px; }}
    .hero-card {{
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(217, 207, 191, 0.8);
      border-radius: 24px;
      padding: 18px;
      box-shadow: 0 10px 30px rgba(77, 60, 33, 0.08);
    }}
    .hero-card img, .step-card img {{ width: 100%; display: block; border-radius: 18px; background: #fff; }}
    .stats {{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }}
    .stat {{ background: rgba(255,255,255,0.74); border: 1px solid rgba(217, 207, 191, 0.8); border-radius: 20px; padding: 14px 16px; }}
    .stat strong {{ display: block; font-size: 20px; color: var(--accent); margin-bottom: 4px; }}
    .grid {{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }}
    .panel {{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }}
    .span-7 {{ grid-column: span 7; }} .span-5 {{ grid-column: span 5; }} .span-12 {{ grid-column: span 12; }} .span-6 {{ grid-column: span 6; }} .span-8 {{ grid-column: span 8; }} .span-4 {{ grid-column: span 4; }}
    ul.clean {{ list-style: none; margin: 0; padding: 0; }}
    ul.clean li {{ padding: 10px 0; border-bottom: 1px dashed var(--line); }}
    ul.clean li:last-child {{ border-bottom: 0; }}
    .chip-row {{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }}
    .chip {{ background: #f0ebe2; border: 1px solid var(--line); color: #4f5b66; padding: 8px 12px; border-radius: 999px; font-size: 14px; }}
    table {{ width: 100%; border-collapse: collapse; font-size: 15px; }}
    th, td {{ padding: 10px 12px; border-bottom: 1px solid #ebe3d8; text-align: {align}; vertical-align: top; }}
    th {{ background: #f2ebe1; color: #36414a; font-size: 14px; }}
    .steps {{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }}
    .step-card {{ border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,247,239,0.98)); }}
    .step-body {{ padding: 18px 18px 20px; }}
    .step-index {{ display: inline-block; margin-bottom: 10px; color: var(--accent); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; }}
    .note {{ background: linear-gradient(180deg, rgba(197, 70, 47, 0.06), rgba(197, 70, 47, 0.02)); border-{border_side}: 4px solid var(--accent); padding: 16px 18px; border-radius: 18px; color: #5e3d35; }}
    .footer {{ text-align: center; color: var(--muted); font-size: 14px; margin-top: 24px; padding-bottom: 10px; }}
    @media (max-width: 900px) {{
      .hero-grid, .steps, .grid {{ display: block; }}
      .panel, .hero-card, .step-card {{ margin-top: 18px; }}
      .stats {{ grid-template-columns: 1fr; }}
    }}
    """


def table_html(headers: list[str], rows: list[tuple[str, ...]]) -> str:
    head = "".join(f"<th>{h}</th>" for h in headers)
    body = "".join(
        "<tr>" + "".join(f"<td>{cell}</td>" for cell in row) + "</tr>"
        for row in rows
    )
    return f"<table><thead><tr>{head}</tr></thead><tbody>{body}</tbody></table>"


def step_card(img: str, idx: str, title: str, text: str, alt: str) -> str:
    return f"""
    <article class="step-card">
      <img src="{png_data(img)}" alt="{alt}">
      <div class="step-body">
        <span class="step-index">{idx}</span>
        <h3>{title}</h3>
        <p>{text}</p>
      </div>
    </article>
    """


def write_hebrew() -> None:
    cards = [
        step_card("diykit_all-04.png", "שלבים 1–2", "נגדים ראשונים", "הרכיבו את נגדי 51 אוהם במיקומים R5, R6, R11, R12 ואת נגדי 10 אוהם במיקומים R9 ו־R10.", "שלבים 1-2"),
        step_card("diykit_all-05.png", "שלבים 3–4", "נגד 1K ותושבת שבב", "הרכיבו את נגדי 1K במיקומים R7 ו־R8 ולאחר מכן את תושבת ה־DIP-8 במיקום IC1, בכיוון הסימון הנכון.", "שלבים 3-4"),
        step_card("diykit_all-06.png", "שלבים 5–6", "טרנזיסטורים וקוטביות LED", "הרכיבו את הטרנזיסטורים Q1 ו־Q2, ואז זיהו נכון את האנודה והקתודה של הלדים לפני ההלחמה.", "שלבים 5-6"),
        step_card("diykit_all-07.png", "שלבים 7–8", "לדים אדומים ופוטנציומטרים", "הרכיבו את D1 ו־D2 ולאחר מכן את הפוטנציומטרים R1 ו־R2 שמשמשים לכיוון החיישנים.", "שלבים 7-8"),
        step_card("diykit_all-08.png", "שלבים 9–10", "קבלים אלקטרוליטיים", "זהו את הקוטביות של הקבלים, ואז הרכיבו את C1 ו־C2 תוך התאמה בין הסימון על הרכיב לסימון על ה־PCB.", "שלבים 9-10"),
        step_card("diykit_all-09.png", "שלבים 11–12", "מתג וחיישני אור", "הרכיבו את המתג S1 ואת נגדי האור R13 ו־R14 בצדו השני של הלוח, בגובה המומלץ.", "שלבים 11-12"),
        step_card("diykit_all-10.png", "שלבים 13–14", "לדים לבנים וחיווט מנועים", "הרכיבו את D4 ו־D5, ואז הכינו ארבעה חוטים באורך 6 ס\"מ והלחימו אותם לנקודות M1 ו־M2.", "שלבים 13-14"),
        step_card("diykit_all-11.png", "שלבים 15–16", "תמיכה קדמית ומרווחים", "הרכיבו את עמוד התמיכה הקדמי, ואז קבעו את מרווחי הפלסטיק הצהובים מבלי להדק סופית.", "שלבים 15-16"),
        step_card("diykit_all-12.png", "שלבים 17–18", "התחלת הרכבת הגלגל", "הכניסו את הציר לגלגל והוסיפו את השרוול התלת־כיווני הראשון.", "שלבים 17-18"),
        step_card("diykit_all-13.png", "שלבים 19–20", "מרווח וגלגל שיניים", "הוסיפו מרווח פלסטיק ולאחר מכן את גלגל השיניים, בכיוון הנכון.", "שלבים 19-20"),
        step_card("diykit_all-14.png", "שלבים 21–22", "סיום גלגל ראשון", "הוסיפו את השרוול השני בקצה הציר והרכיבו את הצמיג על הגלגל.", "שלבים 21-22"),
        step_card("diykit_all-15.png", "שלבים 23–25", "גלגל שני, מנועים ותולעים", "הרכיבו את הגלגל השני, התקינו את שני המנועים, ואז הרכיבו את גלגלי התולעת על צירי המנוע.", "שלבים 23-25"),
        step_card("diykit_all-16.png", "שלבים 26–27", "כיוון וחיבור מכלול הגלגלים", "כווננו את הבורג הרלוונטי, ואז קבעו את שני הגלגלים המורכבים על גבי המרווחים.", "שלבים 26-27"),
        step_card("diykit_all-17.png", "שלבים 28–29", "חיבור מנועים ובית סוללות", "חברו את ארבעת החוטים לשני המנועים, ואז התקינו את בית הסוללות והלחימו את חוטי הפלוס והמינוס.", "שלבים 28-29"),
        step_card("diykit_all-18.png", "שלבים 30–31", "קיבוע סופי ושבב LM393", "הדביקו את בית הסוללות למקומו והכניסו את שבב LM393 לתושבת בכיוון החריץ המתאים.", "שלבים 30-31"),
        step_card("diykit_all-19.png", "שלבים 32–34", "בדיקה, הפעלה וכיול", "בדקו שהלדים נדלקים, ודאו שכיוון המנועים תקין, הפעילו את הערכה, ואז כווננו את הפוטנציומטרים עד שהרכב עוקב היטב אחרי הקו.", "שלבים 32-34"),
    ]
    html = f"""<!doctype html>
<html lang="he" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ערכת רכב עוקב קו חכם D2-5</title>
  <style>{base_css('rtl', 'right', 'right')}</style>
</head>
<body>
  <main class="shell">
    <section class="hero">
      <div class="hero-grid">
        <div>
          <span class="eyebrow">מדריך עברי מעוצב</span>
          <h1>ערכת רכב עוקב קו חכם D2-5</h1>
          <p class="lead">גרסת HTML נוחה לקריאה של מדריך ההרכבה המקורי, בעברית, עם כל התמונות מוטמעות ישירות בתוך הקובץ.</p>
          <div class="stats">
            <div class="stat"><strong>19</strong>עמודי מקור</div>
            <div class="stat"><strong>34</strong>שלבי הרכבה</div>
            <div class="stat"><strong>HTML</strong>קובץ עצמאי</div>
          </div>
        </div>
        <div class="hero-card">
          <img src="{png_data('diykit_all-03.png')}" alt="תצוגת הערכה והחלקים המרכזיים">
        </div>
      </div>
    </section>

    <section class="grid">
      <article class="panel span-7">
        <h2>מבוא</h2>
        <p>על גבי משטח לבן מופיע פס שחור ברוחב 16 מ"מ. הרכב עוקב אחרי הפס השחור באופן אוטומטי, גם כאשר המסלול מתעקל.</p>
        <p>המערכת מבוססת על ההבדל בהחזרת אור ממשטח לבן לעומת משטח שחור. החיישנים מזהים את מיקום הרכב ביחס למסלול, והמנועים מתקנים את הכיוון בהתאם.</p>
        <div class="chip-row">
          <span class="chip">מעגלים</span>
          <span class="chip">חיישנים</span>
          <span class="chip">הלחמה</span>
          <span class="chip">למידה מעשית</span>
          <span class="chip">DIY</span>
        </div>
      </article>
      <aside class="panel span-5">
        <h2>תכונות עיקריות</h2>
        <ul class="clean">
          <li>תנועה אוטומטית בעקבות קו</li>
          <li>בקרה חכמה אוטומטית</li>
          <li>תרגול מקצועי במעגלים, מכניקה וחיישנים</li>
          <li>חיזוק הקשר בין תאוריה לפרקטיקה</li>
          <li>ערכת הלחמה ידנית לבנייה עצמית</li>
        </ul>
      </aside>
      <article class="panel span-6">
        <h2>מפרט</h2>
        <ul class="clean">
          <li><strong>שם המוצר:</strong> ערכת רכב עוקב קו חכם D2-5</li>
          <li><strong>מתח עבודה:</strong> DC 3.0V</li>
          <li><strong>טמפרטורת עבודה:</strong> ‎-40°C עד ‎85°C</li>
          <li><strong>לחות עבודה:</strong> ‎5% עד ‎95%RH</li>
          <li><strong>מידות לאחר הרכבה:</strong> ‎104×72×55 מ"מ</li>
        </ul>
      </article>
      <article class="panel span-6">
        <h2>אופן שימוש ראשוני</h2>
        <ul class="clean">
          <li>הכניסו שתי סוללות AA לבית הסוללות, כשהקצה השטוח נוגע בקפיץ.</li>
          <li>העבירו את המתג למצב <strong>ON</strong>. אם שני הלדים האדומים נדלקים, ההרכבה תקינה.</li>
          <li>אם כיוון סיבוב מנוע שגוי, החליפו בין חוטי המנוע.</li>
          <li>כווננו את הפוטנציומטרים אם הרכב לא נע נכון לאורך הפס השחור.</li>
          <li>לכיול מדויק, הניחו את הרכב על גבו ובצעו כיוונים קטנים ובדיקות חוזרות.</li>
        </ul>
      </article>
      <section class="panel span-12">
        <h2>רשימת רכיבים</h2>
        {table_html(["מס'", "שם רכיב", "סימון PCB", "פרמטר", "כמות"], COMPONENT_ROWS)}
      </section>
      <article class="panel span-8">
        <h2>טיפים להרכבה</h2>
        <ul class="clean">
          <li>הכינו מראש מלחם עד 50W, בדיל עם ליבת שרף, קאטר, קולף חוטים ומברג פיליפס.</li>
          <li>עבדו בסבלנות ואל תחזיקו את המלחם על רכיב יותר משנייה אחת.</li>
          <li>בדקו קוטביות לפני כל הלחמה, במיוחד בלדים ובקבלים.</li>
          <li>הימנעו מקצרים וודאו שכל רכיב יושב במיקום ובכיוון הנכון.</li>
          <li>מומלץ לקרוא את כל ההוראות לפני תחילת ההרכבה.</li>
        </ul>
      </article>
      <aside class="panel span-4">
        <h2>יישומים</h2>
        <ul class="clean">
          <li>תרגול מיומנויות הלחמה</li>
          <li>לימוד בבתי ספר</li>
          <li>בנייה עצמית</li>
          <li>פרויקטים חינוכיים</li>
          <li>תחרויות אלקטרוניקה</li>
          <li>מתנה חינוכית</li>
        </ul>
      </aside>
      <section class="panel span-12">
        <h2>שלבי הרכבה עם התמונות המקוריות</h2>
        <p class="lead">בכל כרטיס מופיעה תמונת המקור מתוך ה־PDF. הטקסט להלן מסכם בעברית את מה שמבוצע בכל זוג שלבים.</p>
        <div class="steps">{''.join(cards)}</div>
      </section>
      <section class="panel span-12">
        <div class="note"><strong>הערה:</strong> זהו קובץ HTML עצמאי. התמונות מוטמעות בתוכו, ולכן הוא נפתח נכון גם ב־IAB.</div>
      </section>
    </section>
    <div class="footer">נוצר מתוך המדריך המקורי של ערכת D2-5 Intelligent Tracking Car DIY Kit</div>
  </main>
</body>
</html>"""
    (OUT / "diy_kit_instructions_hebrew.html").write_text(html, encoding="utf-8")


def write_german() -> None:
    cards = [
        step_card("diykit_all-04.png", "Schritte 1–2", "Erste Widerstände", "51-Ohm-Widerstände an R5, R6, R11 und R12 sowie 10-Ohm-Widerstände an R9 und R10 einlöten.", "Schritte 1-2"),
        step_card("diykit_all-05.png", "Schritte 3–4", "1K-Widerstände und IC-Sockel", "1K-Widerstände an R7 und R8 montieren, danach den DIP-8-IC-Sockel in korrekter Ausrichtung auf IC1 einsetzen.", "Schritte 3-4"),
        step_card("diykit_all-06.png", "Schritte 5–6", "Transistoren und LED-Polung", "Q1 und Q2 einsetzen und anschließend Anode und Kathode der LEDs korrekt identifizieren.", "Schritte 5-6"),
        step_card("diykit_all-07.png", "Schritte 7–8", "Rote LEDs und Potentiometer", "D1 und D2 einlöten, danach die Potentiometer R1 und R2 für die Sensorjustierung montieren.", "Schritte 7-8"),
        step_card("diykit_all-08.png", "Schritte 9–10", "Elektrolytkondensatoren", "Polung der Kondensatoren bestimmen und C1 sowie C2 entsprechend der PCB-Markierung einsetzen.", "Schritte 9-10"),
        step_card("diykit_all-09.png", "Schritte 11–12", "Schalter und Lichtsensoren", "Schalter S1 montieren und anschließend die Fotowiderstände R13 und R14 auf der Rückseite in der richtigen Höhe einbauen.", "Schritte 11-12"),
        step_card("diykit_all-10.png", "Schritte 13–14", "Weiße LEDs und Motorleitungen", "D4 und D5 montieren, dann vier 6-cm-Kabel vorbereiten und an M1 und M2 anlöten.", "Schritte 13-14"),
        step_card("diykit_all-11.png", "Schritte 15–16", "Frontstütze und Abstandshalter", "Vordere Stütze montieren und die gelben Kunststoff-Abstandshalter zunächst nur locker befestigen.", "Schritte 15-16"),
        step_card("diykit_all-12.png", "Schritte 17–18", "Beginn Radmontage", "Achse durch das Rad führen und die erste Dreifachhülse aufsetzen.", "Schritte 17-18"),
        step_card("diykit_all-13.png", "Schritte 19–20", "Abstandshalter und Zahnrad", "Kunststoff-Abstandshalter und Zahnrad in der richtigen Orientierung auf die Achse setzen.", "Schritte 19-20"),
        step_card("diykit_all-14.png", "Schritte 21–22", "Erstes Rad fertigstellen", "Zweite Dreifachhülse am Achsende montieren und den Reifen auf das Rad aufziehen.", "Schritte 21-22"),
        step_card("diykit_all-15.png", "Schritte 23–25", "Zweites Rad, Motoren, Schnecken", "Zweites Rad wie zuvor aufbauen, beide Motoren montieren und die Schnecken auf die Motorachsen setzen.", "Schritte 23-25"),
        step_card("diykit_all-16.png", "Schritte 26–27", "Justage und Radmontage", "Schraube vorbereiten und beide fertig montierten Räder an den Abstandshaltern befestigen.", "Schritte 26-27"),
        step_card("diykit_all-17.png", "Schritte 28–29", "Motoranschlüsse und Batteriehalter", "Motorleitungen korrekt anschließen und anschließend den Batteriehalter befestigen und verlöten.", "Schritte 28-29"),
        step_card("diykit_all-18.png", "Schritte 30–31", "Endmontage und LM393", "Batteriehalter aufkleben und den LM393 in richtiger Kerben-Ausrichtung in den Sockel einsetzen.", "Schritte 30-31"),
        step_card("diykit_all-19.png", "Schritte 32–34", "Test, Start und Feinabgleich", "LEDs prüfen, Motordrehrichtung kontrollieren, das Fahrzeug einschalten und die Potentiometer feinjustieren, bis die Spur sauber verfolgt wird.", "Schritte 32-34"),
    ]
    html = f"""<!doctype html>
<html lang="de" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>D2-5 Intelligentes Linienfolger-Auto DIY-Bausatz</title>
  <style>{base_css('ltr', 'left', 'left')}</style>
</head>
<body>
  <main class="shell">
    <section class="hero">
      <div class="hero-grid">
        <div>
          <span class="eyebrow">Gestaltete deutsche HTML-Version</span>
          <h1>D2-5 Intelligentes Linienfolger-Auto DIY-Bausatz</h1>
          <p class="lead">Eine deutschsprachige HTML-Fassung der Originalanleitung mit denselben Montagebildern aus dem PDF, vollständig eingebettet in eine einzige Datei.</p>
          <div class="stats">
            <div class="stat"><strong>19</strong>Originalseiten</div>
            <div class="stat"><strong>34</strong>Montageschritte</div>
            <div class="stat"><strong>HTML</strong>Eigenständige Datei</div>
          </div>
        </div>
        <div class="hero-card">
          <img src="{png_data('diykit_all-03.png')}" alt="Bausatzübersicht">
        </div>
      </div>
    </section>
    <section class="grid">
      <article class="panel span-7">
        <h2>Einführung</h2>
        <p>Auf einer weißen Fläche befindet sich eine 16 mm breite schwarze Spur. Das Fahrzeug folgt dieser schwarzen Linie automatisch, auch wenn sich die Strecke krümmt.</p>
        <p>Das System nutzt den unterschiedlichen Reflexionsgrad heller und dunkler Oberflächen. Die Sensoren erkennen die Linie und passen die Motorbewegung entsprechend an.</p>
        <div class="chip-row">
          <span class="chip">Elektronik</span>
          <span class="chip">Sensorik</span>
          <span class="chip">Löten</span>
          <span class="chip">Praxislernen</span>
          <span class="chip">DIY</span>
        </div>
      </article>
      <aside class="panel span-5">
        <h2>Hauptmerkmale</h2>
        <ul class="clean">
          <li>Automatische Linienverfolgung</li>
          <li>Intelligente automatische Steuerung</li>
          <li>Training in Schaltung, Mechanik und Sensorik</li>
          <li>Verbindung von Theorie und Praxis</li>
          <li>DIY-Lötbausatz</li>
        </ul>
      </aside>
      <article class="panel span-6">
        <h2>Technische Daten</h2>
        <ul class="clean">
          <li><strong>Produktname:</strong> D2-5 Intelligentes Linienfolger-Auto DIY-Bausatz</li>
          <li><strong>Betriebsspannung:</strong> DC 3,0V</li>
          <li><strong>Betriebstemperatur:</strong> -40°C bis 85°C</li>
          <li><strong>Betriebsfeuchtigkeit:</strong> 5% bis 95% RH</li>
          <li><strong>Größe montiert:</strong> 104 × 72 × 55 mm</li>
        </ul>
      </article>
      <article class="panel span-6">
        <h2>Erste Inbetriebnahme</h2>
        <ul class="clean">
          <li>Zwei AA-Batterien in den Batteriehalter einsetzen, mit dem flachen Ende zur Feder.</li>
          <li>Schalter auf <strong>ON</strong> stellen. Leuchten beide roten LEDs, ist die Montage korrekt.</li>
          <li>Dreht ein Motor falsch herum, die Motorleitungen tauschen.</li>
          <li>Mit den Potentiometern die Erkennungsdistanz der Sensoren einstellen.</li>
          <li>Für Feineinstellung das Fahrzeug auf den Rücken legen und schrittweise nachjustieren.</li>
        </ul>
      </article>
      <section class="panel span-12">
        <h2>Stückliste</h2>
        {table_html(["Nr.", "Bauteil", "PCB-Markierung", "Parameter", "Menge"], GERMAN_ROWS)}
      </section>
      <article class="panel span-8">
        <h2>Montagetipps</h2>
        <ul class="clean">
          <li>Benötigt werden Lötkolben bis 50W, Lötzinn mit Flussmittelseele, Seitenschneider, Abisolierer und Schraubendreher.</li>
          <li>Geduldig arbeiten und den Lötkolben nicht länger als etwa 1 Sekunde auf einem Bauteil halten.</li>
          <li>Polung vor dem Einlöten prüfen, besonders bei LEDs und Elektrolytkondensatoren.</li>
          <li>Kurzschlüsse vermeiden und auf korrekte Einbaurichtung achten.</li>
          <li>Die Anleitung möglichst vollständig lesen, bevor die Montage beginnt.</li>
        </ul>
      </article>
      <aside class="panel span-4">
        <h2>Anwendungen</h2>
        <ul class="clean">
          <li>Löttraining</li>
          <li>Schulprojekte</li>
          <li>Selbstbau</li>
          <li>Elektronikprojekte</li>
          <li>Wettbewerbe</li>
          <li>Lern- und Geschenkset</li>
        </ul>
      </aside>
      <section class="panel span-12">
        <h2>Montageschritte mit Originalbildern</h2>
        <p class="lead">Jedes Kartenfeld zeigt das jeweilige Originalbild aus dem PDF. Der Text darunter fasst die Schritte auf Deutsch zusammen.</p>
        <div class="steps">{''.join(cards)}</div>
      </section>
      <section class="panel span-12">
        <div class="note"><strong>Hinweis:</strong> Diese HTML-Datei ist vollständig eigenständig. Alle Bilder sind direkt eingebettet und werden daher auch im In-App-Browser angezeigt.</div>
      </section>
    </section>
    <div class="footer">Erstellt auf Basis der Originalanleitung des D2-5 Intelligent Tracking Car DIY Kit</div>
  </main>
</body>
</html>"""
    (OUT / "diy_kit_instructions_german.html").write_text(html, encoding="utf-8")


def main() -> None:
    write_hebrew()
    write_german()
    print("generated embedded html files")


if __name__ == "__main__":
    main()