signage/docs/onepager.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CANCOM Simple Signage – Überblick</title>
<style>
  @page { size: A4; margin: 12mm 13mm 11mm 13mm; }

  :root {
    --rot: #DA002D;
    --dunkel: #2b2f36;
    --grau: #5b6472;
    --hellgrau: #f2f4f7;
    --linie: #dfe3e9;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0; padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9.1pt;
    line-height: 1.42;
    color: var(--dunkel);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .seite { page-break-after: always; }
  .seite:last-child { page-break-after: auto; }

  /* ── Kopf ── */
  .kopf {
    display: flex; align-items: center; gap: 10mm;
    border-bottom: 2.5pt solid var(--rot);
    padding-bottom: 3.5mm; margin-bottom: 5mm;
  }
  .logobox { background: var(--dunkel); padding: 2.5mm 4mm; border-radius: 1.2mm; }
  .logobox img { height: 6.5mm; display: block; }
  .kopf .titel { margin-left: auto; text-align: right; }
  .kopf h1 { font-size: 16pt; margin: 0; letter-spacing: -0.2pt; }
  .kopf .unter { font-size: 8.4pt; color: var(--grau); margin-top: 0.8mm; }

  .kopf-klein {
    display: flex; align-items: baseline;
    border-bottom: 1.2pt solid var(--linie);
    padding-bottom: 2.5mm; margin-bottom: 4.5mm;
  }
  .kopf-klein h2 { font-size: 12.5pt; margin: 0; color: var(--rot); }
  .kopf-klein .seitezahl { margin-left: auto; font-size: 8pt; color: var(--grau); }

  /* ── Einleitung ── */
  .intro {
    background: var(--hellgrau);
    border-left: 3pt solid var(--rot);
    padding: 3mm 4mm; margin-bottom: 5mm;
    font-size: 9.4pt;
  }
  .intro strong { color: var(--rot); }

  /* ── Raster ── */
  .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 6mm; }
  .raster-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3mm 5mm; }

  h3 {
    font-size: 9.6pt; margin: 0 0 1.2mm 0;
    color: var(--dunkel);
    display: flex; align-items: center; gap: 2mm;
  }
  h3::before {
    content: ""; display: inline-block;
    width: 3mm; height: 3mm; border-radius: 0.6mm;
    background: var(--rot); flex: none;
  }
  h3.grau::before { background: var(--grau); }

  p { margin: 0 0 1.6mm 0; }
  .block { margin-bottom: 3.6mm; }
  ul { margin: 0.5mm 0 0 0; padding-left: 4.2mm; }
  li { margin-bottom: 0.7mm; }
  .klein { font-size: 8.2pt; color: var(--grau); }

  code {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 8.2pt;
    background: var(--hellgrau);
    padding: 0.3mm 1mm; border-radius: 0.8mm;
  }

  /* ── Ablauf-Schritte ── */
  .schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-bottom: 5mm; }
  .schritt {
    border: 0.8pt solid var(--linie); border-radius: 1.5mm;
    padding: 2.5mm 3mm; position: relative;
  }
  .schritt .nr {
    display: inline-block; width: 5mm; height: 5mm; line-height: 5mm;
    text-align: center; border-radius: 50%;
    background: var(--rot); color: #fff;
    font-size: 8pt; font-weight: bold; margin-bottom: 1.5mm;
  }
  .schritt b { display: block; font-size: 9pt; margin-bottom: 0.8mm; }
  .schritt span { font-size: 8.2pt; color: var(--grau); line-height: 1.35; display: block; }

  /* ── Tabelle ── */
  table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  th, td { text-align: left; padding: 1.4mm 2mm; border-bottom: 0.6pt solid var(--linie); vertical-align: top; }
  th { background: var(--hellgrau); font-size: 8.2pt; }
  td:first-child { white-space: nowrap; font-weight: 600; }

  /* ── Hinweiskasten ── */
  .kasten {
    border: 0.8pt solid var(--linie); border-radius: 1.5mm;
    padding: 3mm 3.5mm; background: #fcfcfd;
  }
  .kasten h3 { margin-bottom: 1.8mm; }

  .warn {
    border-left: 3pt solid #f59f00; background: #fff9e6;
    padding: 2.5mm 3.5mm; border-radius: 0 1.5mm 1.5mm 0;
    margin-bottom: 4mm;
  }

  .badge {
    display: inline-block; padding: 0.2mm 1.4mm; border-radius: 0.8mm;
    font-size: 7.6pt; font-weight: 600; vertical-align: 0.3mm;
  }
  .b-rot { background: var(--rot); color: #fff; }
  .b-blau { background: #206bc4; color: #fff; }
  .b-grau { background: #e4e7ec; color: #555e6d; }
  .b-gruen { background: #2fb344; color: #fff; }

  /* ── Fuß ── */
  .fuss {
    border-top: 0.6pt solid var(--linie);
    margin-top: 4mm; padding-top: 1.5mm;
    font-size: 7.4pt; color: var(--grau);
    display: flex;
  }
  .fuss .rechts { margin-left: auto; }
</style>
</head>
<body>

<!-- ══════════════ VORDERSEITE ══════════════ -->
<div class="seite">

  <div class="kopf">
    <span class="logobox"><img src="cancom.svg" alt="CANCOM"></span>
    <div class="titel">
      <h1>Simple Signage</h1>
      <div class="unter">Infobildschirme selbst befüllen – ohne IT-Kenntnisse</div>
    </div>
  </div>

  <div class="intro">
    <strong>Was ist das?</strong> Simple Signage zeigt Bilder, Videos, Webseiten und Begrüßungen auf den
    Info-Bildschirmen im Haus. Sie bestimmen im Browser, was wann auf welchem Bildschirm läuft – die
    Änderung ist binnen Sekunden auf dem Schirm. Es wird nichts installiert: Sie brauchen nur einen Browser,
    Ihre E-Mail-Adresse und Ihr Passwort.
  </div>

  <div class="schritte">
    <div class="schritt">
      <span class="nr">1</span>
      <b>Anmelden</b>
      <span>Browser öffnen, E-Mail und Passwort eingeben. Sie sehen nur die Standorte, für die Sie freigeschaltet sind.</span>
    </div>
    <div class="schritt">
      <span class="nr">2</span>
      <b>Bildschirm wählen</b>
      <span>Jeder Bildschirm („Screen“) hat eine eigene Kachel mit seiner Abspielliste.</span>
    </div>
    <div class="schritt">
      <span class="nr">3</span>
      <b>Inhalte einstellen</b>
      <span>Bilder oder Videos hochladen, Webseiten als Link eintragen, Reihenfolge per Maus ziehen.</span>
    </div>
    <div class="schritt">
      <span class="nr">4</span>
      <b>Fertig</b>
      <span>Es gibt keinen Speichern-Knopf für die Liste – der Bildschirm übernimmt die Änderung von selbst.</span>
    </div>
  </div>

  <div class="raster">

    <div class="block">
      <h3>Standort und Bildschirm</h3>
      <p>Ein <b>Standort</b> ist ein Haus oder eine Niederlassung, zum Beispiel Stuttgart. Darin liegen die
      einzelnen <b>Bildschirme</b> – Empfang, Kantine, Flur. Oben im Kopf wechseln Sie den Standort.</p>
      <p>Jeder Bildschirm hat seine eigene Abspielliste. Was Sie am Empfang ändern, betrifft die Kantine nicht.</p>
    </div>

    <div class="block">
      <h3>Die Abspielliste (Playlist)</h3>
      <p>Die Liste wird von oben nach unten durchlaufen und beginnt danach von vorn. Pro Eintrag haben Sie:</p>
      <ul>
        <li><b>Haken</b> – Eintrag läuft mit oder pausiert</li>
        <li><b>Griff links</b> – mit der Maus an eine andere Stelle ziehen</li>
        <li><b>Stift</b> – Einstellungen des Eintrags ändern</li>
        <li><b>Papierkorb</b> – Eintrag und Datei entfernen</li>
      </ul>
    </div>

    <div class="block">
      <h3>Was Sie anzeigen können</h3>
      <table>
        <tr><td>Bilder</td><td>JPG und PNG, am besten in Bildschirmgröße (1920×1080)</td></tr>
        <tr><td>Videos</td><td>MP4, laufen ohne Ton</td></tr>
        <tr><td>Webseiten</td><td>Als Adresse eintragen, z.&nbsp;B. ein Dashboard oder Intranet</td></tr>
        <tr><td>Begrüßung</td><td>Wird im Formular erzeugt, siehe Rückseite</td></tr>
      </table>
    </div>

    <div class="block">
      <h3>Zeitsteuerung</h3>
      <p>Jeder Eintrag kann auf ein Zeitfenster gelegt werden – <b>einmalig</b> (von Datum bis Datum),
      <b>täglich</b> oder <b>wöchentlich</b> an bestimmten Wochentagen. Außerhalb des Fensters wird er
      einfach übersprungen.</p>
      <p class="klein">Typisch: Das Kantinenmenü nur von 11 bis 14 Uhr, der Veranstaltungshinweis nur bis zum Termin.</p>
    </div>

    <div class="block">
      <h3>Haken und Zeit sind zweierlei</h3>
      <p>Der <b>Haken</b> ist Ihr Schalter: gesetzt heißt „soll laufen“. Er bleibt gesetzt, auch wenn gerade
      keine Sendezeit ist.</p>
      <p>Das <b>Zeit-Badge</b> sagt, ob es gerade so weit ist:
      <span class="badge b-blau">Zeit</span> läuft jetzt &nbsp;·&nbsp;
      <span class="badge b-grau">Zeit</span> wartet auf sein Fenster.</p>
      <p class="klein">Zu sehen ist ein Eintrag nur, wenn beides zutrifft: Haken gesetzt <i>und</i> im Zeitfenster.</p>
    </div>

    <div class="block">
      <h3>Läuft der Bildschirm?</h3>
      <p>Neben jeder Bildschirm-Kachel steht <span class="badge b-gruen">Online</span> oder
      <span class="badge b-rot">Offline</span>. Grün heißt: Das Gerät hat sich in der letzten Minute gemeldet.</p>
      <p class="klein">Bleibt es rot, ist meist das Gerät aus oder vom Netz getrennt – im Tab „Info“ stehen die
      letzten Angaben dazu.</p>
    </div>

  </div>

  <div class="kasten" style="margin-top:1mm;">
    <h3 class="grau">So sieht ein typischer Arbeitstag damit aus</h3>
    <div class="raster-3" style="margin-top:1.5mm;">
      <div>
        <b>Morgens: Besuch kündigt sich an</b>
        <p class="klein">Unter „Willkommen“ den Firmennamen eintragen, Datum bis wann, fertig. Der Empfangsbildschirm
        begrüßt den Gast, danach verschwindet die Seite von selbst.</p>
      </div>
      <div>
        <b>Mittags: Speiseplan</b>
        <p class="klein">Das Plakat als Bild hochladen und auf täglich 11–14 Uhr stellen. Ab dann kümmert es sich
        jeden Tag von allein.</p>
      </div>
      <div>
        <b>Kurzfristig: Hinweis für alle</b>
        <p class="klein">„Aufzug außer Betrieb“ in die Priority-Liste – der Hinweis läuft sofort auf allen
        Bildschirmen des Standorts mit.</p>
      </div>
    </div>
  </div>

  <div class="fuss">
    <div>CANCOM Simple Signage – Kurzüberblick für Anwender</div>
    <div class="rechts">Vorderseite &nbsp;·&nbsp; bitte wenden →</div>
  </div>
</div>

<!-- ══════════════ RÜCKSEITE ══════════════ -->
<div class="seite">

  <div class="kopf-klein">
    <h2>Weitere Funktionen</h2>
    <div class="seitezahl">CANCOM Simple Signage</div>
  </div>

  <div class="raster">

    <div class="block">
      <h3>Begrüßungsseite für Besuch</h3>
      <p>Über den Menüpunkt <b>Willkommen</b> tragen Sie bis zu drei Firmennamen ein. Das Logo wird automatisch
      gesucht; finden Sie es nicht passend, laden Sie selbst eines hoch. Dazu je ein Feld für den
      Ansprechpartner.</p>
      <ul>
        <li>Die Seite erscheint ganz vorn auf allen Bildschirmen, die dafür eingestellt sind</li>
        <li><b>Anzeigen bis:</b> Datum eintragen, dann verschwindet sie von selbst</li>
        <li>Diese Seite können Sie auch <b>ohne Anmeldung</b> aufrufen – gedacht für den Empfang</li>
      </ul>
    </div>

    <div class="block">
      <h3>Priority-Liste: für alle gleichzeitig</h3>
      <p>Was in die Priority-Liste eines Standorts kommt, läuft auf <b>allen</b> Bildschirmen dieses
      Standorts mit – ohne dass Sie jede Liste einzeln anfassen. Gedacht für Ankündigungen, die alle
      angehen.</p>
      <p>In den normalen Listen sehen Sie diese Einträge grau hinterlegt mit dem Vermerk
      <span class="badge b-rot">Prio</span>. Dort sind sie nur zur Ansicht – geändert wird im Menüpunkt
      <b>Priority</b>.</p>
    </div>

    <div class="block">
      <h3>Knöpfe auf dem Bildschirm</h3>
      <p>Ist der Bildschirm berührungsempfindlich, lässt sich ein Knopf einblenden, der eine Seite öffnet –
      etwa ein Formular oder den Lageplan. Position frei wählbar, mit Zurück-Knopf.</p>
      <p>Ebenso der <b>Digital Voice Agent</b>: ein Sprachassistent, den Besucher selbst starten können.</p>
    </div>

    <div class="block">
      <h3>Laufschrift und Ansicht</h3>
      <ul>
        <li><b>Newsticker:</b> Laufschrift am unteren Rand, pro Bildschirm</li>
        <li><b>Stehenbleiben:</b> Der Bildschirm zeigt dauerhaft nur den ersten Eintrag, statt zu wechseln</li>
        <li><b>Anzeigedauer:</b> Wie lange ein Bild stehen bleibt, bevor das nächste kommt</li>
      </ul>
    </div>

    <div class="block">
      <h3>Ihr Zugang</h3>
      <ul>
        <li>Beim ersten Anmelden vergeben Sie ein eigenes Passwort</li>
        <li>Passwort vergessen? Ein Administrator setzt es zurück</li>
        <li><b>Zwei-Faktor:</b> freiwillig einschaltbar – zusätzlich zum Passwort ein Zahlencode aus der
            Authenticator-App. Ihr eigenes Gerät können Sie für bis zu 30 Tage merken lassen, dann entfällt
            die Codeeingabe</li>
      </ul>
    </div>

    <div class="block">
      <h3>Wer darf was</h3>
      <table>
        <tr><td>Anwender</td><td>Pflegt die Bildschirme der ihm zugewiesenen Standorte</td></tr>
        <tr><td>Superuser</td><td>Pflegt alle Standorte</td></tr>
        <tr><td>Administrator</td><td>Zusätzlich Benutzer, Standorte und Bildschirme verwalten</td></tr>
      </table>
    </div>

  </div>

  <div class="warn">
    <b>Drei Dinge, die häufig für Verwirrung sorgen</b>
    <ul style="margin-top:1.2mm;">
      <li>Ein zeitgesteuerter Eintrag sieht außerhalb seines Fensters „untätig“ aus – das ist richtig so. Prüfen
          Sie das graue Zeit-Badge, bevor Sie etwas ändern.</li>
      <li>Priority-Einträge stehen in der normalen Liste nur zur Ansicht. Ändern lassen sie sich ausschließlich
          im Menüpunkt Priority.</li>
      <li>Die Bildschirme selbst melden sich nicht an. Wer die Adresse kennt, sieht den Inhalt – legen Sie dort
          nichts Vertrauliches ab.</li>
    </ul>
  </div>

  <div class="kasten">
    <h3 class="grau">Wenn etwas nicht so aussieht wie erwartet</h3>
    <div class="raster-3" style="margin-top:1.5mm;">
      <div>
        <b>Der Bildschirm zeigt Altes</b>
        <p class="klein">Er prüft alle fünf Sekunden auf Änderungen. Dauert es länger, steht der Status
        vermutlich auf Offline.</p>
      </div>
      <div>
        <b>Ein Eintrag fehlt</b>
        <p class="klein">Haken gesetzt? Zeitfenster aktiv? Beides muss zutreffen, damit etwas erscheint.</p>
      </div>
      <div>
        <b>Das Video ruckelt</b>
        <p class="klein">MP4 mit H.264 und höchstens 1920×1080 verwenden. Größere Dateien überfordern
        die Abspielgeräte.</p>
      </div>
    </div>
    <p class="klein" style="margin-top:2.5mm; margin-bottom:0;">
      Ausführliche Erklärungen zu jeder Funktion finden Sie jederzeit in der Oberfläche unter
      <b>Hilfe</b> – im Menü hinter Ihrer E-Mail-Adresse oben rechts.</p>
  </div>

  <div class="fuss">
    <div>CANCOM Simple Signage – Kurzüberblick für Anwender</div>
    <div class="rechts">Rückseite</div>
  </div>
</div>

</body>
</html>