kalina-ci/templates/report.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>«Dokumenttitel» — KALINA</title>
<link rel="stylesheet" href="kalina-ci.css">
<style>
  /* Nur falls kalina-ci.css nicht per <link> erreichbar ist: Inhalt hier einsetzen. */
</style>
</head>
<body class="dokument">

  <!-- KOPFLEISTE: Marke (SVG, schriftfrei) + Wortmarke als TEXT (das i in Kalina-Rot) -->
  <header class="kopf">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="34" height="34" aria-label="KALINA Mark">
      <circle cx="120" cy="120" r="112" fill="#0e1419" stroke="#2a323c" stroke-width="2"/>
      <g fill="none" stroke="#f5f5ef" stroke-width="30" stroke-linecap="square" stroke-linejoin="miter">
        <path d="M84,72 L84,168"/><path d="M100,120 L176,64"/><path d="M100,124 L176,176"/>
      </g>
      <g fill="#c1121f">
        <circle cx="176" cy="64" r="2.2"/><circle cx="189" cy="64" r="2.2"/><circle cx="182.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="75.3" r="2.2"/><circle cx="182.5" cy="75.3" r="2.2"/>
        <circle cx="176" cy="176" r="2.2"/><circle cx="189" cy="176" r="2.2"/><circle cx="182.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="187.3" r="2.2"/><circle cx="182.5" cy="187.3" r="2.2"/>
      </g>
      <circle cx="100" cy="122" r="4.5" fill="#c1121f"/>
    </svg>
    <span class="wortmarke">KAL<i>I</i>NA</span>
  </header>

  <!-- TITELZONE -->
  <h1 class="titel">«Dokumenttitel»</h1>
  <p class="untertitel">«Untertitel oder Dokumentart»</p>
  <p class="lead">«Ein Satz, der sagt, worum es geht und was der Leser nach dem Lesen weiß.»</p>

  <!-- METADATEN -->
  <table>
    <thead><tr><th style="width:34%">Feld</th><th>Wert</th></tr></thead>
    <tbody>
      <tr><td>Erstellt</td><td>«TT.MM.JJJJ»</td></tr>
      <tr><td>Verfasser</td><td>«Name»</td></tr>
      <tr><td>Stand / Fassung</td><td>«Fassung, z. B. 1.0»</td></tr>
      <tr><td>Grundlage</td><td>«Quelle, Vertrag, Messung — mit Pfad oder URL»</td></tr>
    </tbody>
  </table>

  <!-- ABSCHNITTE -->
  <section class="abschnitt">
    <h2>«Erster Abschnitt»</h2>
    <p>«Text. Zahlen und Aussagen, die belegt sind, mit Quelle; Schätzungen als Schätzung kennzeichnen.»</p>
    <ul>
      <li>«Punkt»</li>
      <li>«Punkt»</li>
    </ul>
  </section>

  <section class="abschnitt">
    <h2>«Zweiter Abschnitt»</h2>
    <table>
      <thead><tr><th>Position</th><th class="zahl">Menge</th><th class="zahl">Betrag</th></tr></thead>
      <tbody>
        <tr><td>«…»</td><td class="zahl">1</td><td class="zahl">0,00 €</td></tr>
        <tr><td>«…»</td><td class="zahl">2</td><td class="zahl">0,00 €</td></tr>
      </tbody>
    </table>
    <p class="hinweis">«Hinweis, Vorbehalt oder offene Frage.»</p>
  </section>

  <!-- MARKEN-PLAKETTE: dort, wo der Text die Marke erklärt (optional) -->
  <aside class="plakette">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="116" height="116" aria-label="KALINA Mark">
      <circle cx="120" cy="120" r="112" fill="#0e1419" stroke="#2a323c" stroke-width="2"/>
      <g fill="none" stroke="#f5f5ef" stroke-width="30" stroke-linecap="square" stroke-linejoin="miter">
        <path d="M84,72 L84,168"/><path d="M100,120 L176,64"/><path d="M100,124 L176,176"/>
      </g>
      <g fill="#c1121f">
        <circle cx="176" cy="64" r="2.2"/><circle cx="189" cy="64" r="2.2"/><circle cx="182.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="75.3" r="2.2"/><circle cx="182.5" cy="75.3" r="2.2"/>
        <circle cx="176" cy="176" r="2.2"/><circle cx="189" cy="176" r="2.2"/><circle cx="182.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="187.3" r="2.2"/><circle cx="182.5" cy="187.3" r="2.2"/>
      </g>
      <circle cx="100" cy="122" r="4.5" fill="#c1121f"/>
    </svg>
    <div class="plakette-titel">«Was die Marke bedeutet»</div>
    <p>Kalina = Vogelbeere (Viburnum): Ausdauer, Lebenskraft, Jugend. K-Monogramm im Siegel,
    das i der Wortmarke ist die Beere. «Nur einsetzen, wenn das Dokument die Marke erklären soll.»</p>
  </aside>

  <!-- IMPRESSUM (Pflicht am Dokumentende, Autor ist Kalina) -->
  <footer class="fuss impressum">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="26" height="26" aria-label="KALINA Mark">
      <circle cx="120" cy="120" r="112" fill="#0e1419" stroke="#2a323c" stroke-width="2"/>
      <g fill="none" stroke="#f5f5ef" stroke-width="30" stroke-linecap="square" stroke-linejoin="miter">
        <path d="M84,72 L84,168"/><path d="M100,120 L176,64"/><path d="M100,124 L176,176"/>
      </g>
      <g fill="#c1121f">
        <circle cx="176" cy="64" r="2.2"/><circle cx="189" cy="64" r="2.2"/><circle cx="182.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="75.3" r="2.2"/><circle cx="182.5" cy="75.3" r="2.2"/>
        <circle cx="176" cy="176" r="2.2"/><circle cx="189" cy="176" r="2.2"/><circle cx="182.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="187.3" r="2.2"/><circle cx="182.5" cy="187.3" r="2.2"/>
      </g>
      <circle cx="100" cy="122" r="4.5" fill="#c1121f"/>
    </svg>
    <span class="fuss-mitte">
      <span class="fuss-titel">KAL<span class="i">I</span>NA · «Dokumenttitel» · Stand «TT.MM.JJJJ»</span><br>
      <span class="fuss-klein">Erstellt durch das Kalina-System · «Auftrag/Projekt · Ticket»</span>
    </span>
    <span>© «JJJJ» kalina.si</span>
  </footer>

</body>
</html>