dogfather-universe/server/pruefdaten/bild-agentur-nachbau.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<style>
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 0;
    background: #0a0a0a;
    color: #e8e8e8;
    font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    position: relative;
  }
  /* Das Wasserzeichen, schraeg und vielfach -- genau das ist der
     Grund, warum diese Messung ueberhaupt noetig ist. */
  .wasser {
    position: absolute; inset: 0; pointer-events: none;
    overflow: hidden; z-index: 5;
  }
  .wasser span {
    position: absolute;
    color: rgba(255,255,255,.055);
    font-size: 13px; white-space: nowrap;
  }
  .karte {
    background: #141414; border-radius: 10px;
    margin: 0 0 14px; padding: 18px 24px 22px;
  }
  .kopf { display: flex; align-items: baseline; gap: 12px; }
  h1 { margin: 0; font-size: 19px; font-weight: 700; }
  .marke {
    padding: 2px 9px; border-radius: 4px;
    background: #1d3a2a; color: #4ade80; font-size: 12.5px;
  }
  .rechts { margin-left: auto; display: flex; gap: 22px; font-size: 14px; }
  .rechts a { color: #22d3ee; text-decoration: none; }
  .rechts .grau { color: #9a9a9a; }
  .spanne { margin: 6px 0 0; color: #c9c9c9; font-size: 14px; }
  h2 { margin: 26px 0 14px; font-size: 16px; font-weight: 700; }
  .raster {
    display: grid; grid-template-columns: 150px 1fr 150px 1fr;
    gap: 12px 24px; font-size: 14px;
  }
  .schild { color: #9a9a9a; }
  .wert { color: #ececec; }
  .wert a { color: #22d3ee; text-decoration: none; }
  .reiter { display: flex; gap: 34px; margin: 0 0 18px; font-size: 15px; }
  .reiter b { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 8px; }
  .reiter span { color: #9a9a9a; }
  .phase { background: #1a1a1a; border-radius: 10px; padding: 18px 22px; }
  .phasekopf { display: flex; align-items: center; gap: 10px; }
  .phasekopf h3 { margin: 0; font-size: 18px; }
  .uhr { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #c9c9c9; font-size: 14px; }
  .uhr b { background: #2a2a2a; border-radius: 5px; padding: 4px 9px; color: #fff; font-size: 15px; }
  ul { margin: 18px 0 0; padding-left: 20px; }
  li { margin: 10px 0; font-size: 14.5px; color: #e4e4e4; }
</style>
</head>
<body>
<div class="wasser" id="wasser"></div>

<div class="karte">
  <div class="kopf">
    <h1>【Star Light】Refined visuals Goal 1.0</h1>
    <span class="marke">In Bearbeitung</span>
    <span class="rechts"><a>Kampagne duplizieren</a><span class="grau">Weniger anzeigen ⌃</span></span>
  </div>
  <p class="spanne">10/01/2026 00:00:00 ~ 10/31/2026 22:59:59 (UTC+02:00)</p>

  <h2>Grundlegende Informationen</h2>
  <div class="raster">
    <span class="schild">Gruppenname</span>
    <span class="wert">【Star Light】Refined visuals Goal 1.0</span>
    <span class="schild">Zeitzone</span>
    <span class="wert">Europe/Amsterdam</span>

    <span class="schild">Daten</span>
    <span class="wert">01.10.2026 00:00 ~ 31.10.2026 22:59(UTC+02:00)</span>
    <span class="schild">Sichtbar für</span>
    <span class="wert">Privat</span>

    <span class="schild">Erstellt von</span>
    <span class="wert">Spicy Media</span>
    <span class="schild">Teilnehmer*innen der ...</span>
    <span class="wert">1 Creator Network, 55 Creator*innen. <a>Einzelheiten anzeigen</a></span>

    <span class="schild">Creator*innen</span>
    <span class="wert">1 ⓘ</span>
    <span class="schild">Anmeldung erforderlich</span>
    <span class="wert">Nein ⓘ</span>
  </div>

  <h2>Gruppenbeschreibung</h2>
  <p style="margin:0;color:#dcdcdc;font-size:14px">Zusätzliche Prämien für das Team im Oktober.</p>
</div>

<div class="karte">
  <div class="reiter"><b>Phasendetails</b><span>Creator*innen-Leistung</span></div>
  <div class="phase">
    <div class="phasekopf">
      <h3>🎯 Ziele erreichen</h3>
      <span class="uhr">Endet in <b>23</b> Tage <b>22</b> : <b>50</b> : <b>44</b></span>
    </div>
    <ul>
      <li>Geh LIVE für 900 Minuten</li>
      <li>15 gültige LIVE-Gehen-Tage haben</li>
      <li>An 20 Tagen Ziele für optimierte Bildqualität erreichen</li>
    </ul>
  </div>
</div>

<script>
  /* Das Wasserzeichen so streuen, wie es auf dem echten Bild liegt:
     schraeg, versetzt, ueber alles. */
  const w = document.getElementById('wasser');
  for (let y = -40; y < 820; y += 86) {
    for (let x = -120; x < 1760; x += 300) {
      const s = document.createElement('span');
      s.textContent = '[email protected]';
      s.style.left = (x + (y / 86 % 2) * 150) + 'px';
      s.style.top = y + 'px';
      w.appendChild(s);
    }
  }
</script>
</body>
</html>