docs: One-Pager (PDF + HTML-Quelle) fuer Anwender
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Erik Thiele
383
docs/onepager.html
Normal file
383
docs/onepager.html
Normal file
@@ -0,0 +1,383 @@
|
||||
<!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. 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 ·
|
||||
<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 · 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>
|
||||
Reference in New Issue
Block a user