Einfuehrung fuer Einsteiger: Folien mit echten Aufnahmen und Markierungen
Neue Seite "Einfuehrung" im Menue: 31 Folien in zwei Teilen - Bedienen im Alltag (Grundriss, Raum, Rollos, Heizung, Licht, Zeitleiste, Solar, Auto, Heizstab und Wasser, Statistik, Historie, Heizung, Wetter, Fahrzeug, Hilfe) und Einrichten und Verwalten (Preise, Grundriss, Kacheln, Geraete, Automatik anlegen in Wenn/Wann/Dann, Ketten, Fahrzeugschluessel, Protokolle). - Bilder sind echte Aufnahmen der Oberflaeche mit Livewerten, Handy- und Desktopgroesse. tools/einfuehrung/aufnehmen.ps1 steuert Edge ohne Fenster ueber das DevTools-Protokoll nach plan.json und schreibt zu jedem Bild die Lage der markierten Elemente; daraus sitzen die nummerierten Punkte. Wetterort und Schluesselendungen werden vor der Aufnahme abgedeckt. - Blaettern per Knopf, Pfeiltaste oder Wischen; Kapitelsprung; die Folie steht in der Adresse (#folie-7). Erklaerung und Punkt heben sich gegenseitig hervor. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+259
@@ -3166,6 +3166,265 @@ input[type='range']::-webkit-slider-runnable-track {
|
||||
}
|
||||
.zl-karte-knoepfe .btn.zl-karte-weg:hover { color: var(--ton-schlecht, #e06060); }
|
||||
|
||||
/* ===========================================================================
|
||||
Einfuehrung (restricted/einfuehrung.php, js/solar/einfuehrung.js)
|
||||
|
||||
Eine Folie: links das Bild in einem ruhigen Rahmen (Handy-Aufnahmen
|
||||
schmal wie ein Telefon, Desktop-Aufnahmen breit), rechts der Text mit den
|
||||
nummerierten Erklaerungen. Auf schmalen Schirmen untereinander.
|
||||
=========================================================================== */
|
||||
.ef {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto 2rem;
|
||||
outline: none;
|
||||
}
|
||||
.ef-kopf {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: .6rem 1rem;
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
.ef-teile { display: flex; gap: .35rem; flex-wrap: wrap; }
|
||||
.ef-teil {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: .3rem .8rem .3rem .35rem;
|
||||
border: 1px solid var(--ton-linie, rgba(138, 148, 158, .2));
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--ton-schrift-2, #9aa6ad);
|
||||
font: 500 .85rem var(--font-anzeige, inherit);
|
||||
cursor: pointer;
|
||||
transition: background .15s, border-color .15s, color .15s;
|
||||
}
|
||||
.ef-teil-nr {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(138, 148, 158, .18);
|
||||
font-size: .75rem;
|
||||
}
|
||||
.ef-teil.aktiv {
|
||||
border-color: var(--ton-sonne, #f0b429);
|
||||
color: var(--ton-schrift, #e8ede9);
|
||||
background: rgba(var(--ton-sonne-rgb, 240, 180, 41), .1);
|
||||
}
|
||||
.ef-teil.aktiv .ef-teil-nr { background: var(--ton-sonne, #f0b429); color: #1b1f22; }
|
||||
.ef-kopf .form-select.ef-kapitel { width: auto; min-width: 12rem; margin-left: auto; }
|
||||
.ef-zaehler {
|
||||
font-size: .8rem;
|
||||
color: var(--ton-schrift-3, #6f7a81);
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 3.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
.ef-fortschritt {
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--ton-linie, rgba(138, 148, 158, .2));
|
||||
margin-bottom: 1.2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ef-fortschritt span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: var(--ton-sonne, #f0b429);
|
||||
transition: width .35s ease;
|
||||
}
|
||||
|
||||
/* Buehne und Folie */
|
||||
.ef-buehne { position: relative; }
|
||||
.ef-folie {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
padding: 1.6rem;
|
||||
border-radius: var(--ton-radius, .875rem);
|
||||
background: var(--ton-flaeche, #23282c);
|
||||
border: 1px solid var(--ton-linie, rgba(138, 148, 158, .2));
|
||||
min-height: 34rem;
|
||||
}
|
||||
.ef-folie.mit-bild.form-handy { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
|
||||
.ef-folie.mit-bild.form-breit { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
|
||||
.ef-folie.ohne-bild { grid-template-columns: minmax(0, 46rem); justify-content: center; }
|
||||
.ef-folie.rein-vor { animation: ef-rein-vor .32s ease both; }
|
||||
.ef-folie.rein-rueck { animation: ef-rein-rueck .32s ease both; }
|
||||
@keyframes ef-rein-vor { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes ef-rein-rueck { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ef-folie.rein-vor, .ef-folie.rein-rueck { animation: none; }
|
||||
}
|
||||
|
||||
.ef-bild { margin: 0; justify-self: center; width: 100%; }
|
||||
.ef-rahmen {
|
||||
position: relative;
|
||||
border-radius: 14px;
|
||||
overflow: visible;
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
|
||||
}
|
||||
.ef-rahmen img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--ton-linie-satt, rgba(138, 148, 158, .38));
|
||||
}
|
||||
/* Handy-Aufnahmen in einem angedeuteten Telefon. */
|
||||
.form-handy .ef-rahmen {
|
||||
max-width: 330px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
background: #0d0f11;
|
||||
border: 1px solid rgba(138, 148, 158, .3);
|
||||
}
|
||||
.form-handy .ef-rahmen img { border-radius: 22px; border: 0; }
|
||||
|
||||
/* Die nummerierten Punkte im Bild */
|
||||
.ef-marke {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: var(--ton-sonne, #f0b429);
|
||||
color: #1b1f22;
|
||||
font: 700 .8rem var(--font-anzeige, inherit);
|
||||
box-shadow: 0 0 0 3px rgba(27, 31, 34, .85), 0 4px 10px rgba(0, 0, 0, .45);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: transform .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.ef-marke::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -6px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(var(--ton-sonne-rgb, 240, 180, 41), .55);
|
||||
animation: ef-puls 2.4s ease-out infinite;
|
||||
}
|
||||
.ef-marke.hell { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 3px rgba(27, 31, 34, .85), 0 0 0 8px rgba(var(--ton-sonne-rgb, 240, 180, 41), .35); }
|
||||
@keyframes ef-puls { 0% { transform: scale(.8); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { .ef-marke::after { animation: none; opacity: 0; } }
|
||||
|
||||
/* Text */
|
||||
.ef-kapitelname {
|
||||
font-size: .72rem;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ton-sonne, #f0b429);
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
.ef-titel {
|
||||
font: 600 1.7rem/1.2 var(--font-anzeige, inherit);
|
||||
color: var(--ton-schrift, #e8ede9);
|
||||
margin: 0 0 .8rem;
|
||||
}
|
||||
.ef-einleitung {
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.6;
|
||||
color: var(--ton-schrift-2, #9aa6ad);
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
.ef-einleitung b, .ef-marken b, .ef-punkte b, .ef-tipp b { color: var(--ton-schrift, #e8ede9); font-weight: 600; }
|
||||
.ef-marken {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .35rem;
|
||||
}
|
||||
.ef-marken li {
|
||||
display: flex;
|
||||
gap: .7rem;
|
||||
align-items: flex-start;
|
||||
padding: .45rem .6rem;
|
||||
border-radius: 10px;
|
||||
color: var(--ton-schrift-2, #9aa6ad);
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: background .15s;
|
||||
}
|
||||
.ef-marken li:hover, .ef-marken li.hell { background: rgba(var(--ton-sonne-rgb, 240, 180, 41), .09); }
|
||||
.ef-marke-nr {
|
||||
flex: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-top: 1px;
|
||||
border-radius: 50%;
|
||||
background: var(--ton-sonne, #f0b429);
|
||||
color: #1b1f22;
|
||||
font: 700 .72rem var(--font-anzeige, inherit);
|
||||
}
|
||||
.ef-punkte {
|
||||
padding-left: 1.1rem;
|
||||
margin: 0 0 1rem;
|
||||
color: var(--ton-schrift-2, #9aa6ad);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.ef-punkte li { margin-bottom: .45rem; }
|
||||
.ef-punkte li::marker { color: var(--ton-sonne, #f0b429); }
|
||||
.ef-tipp {
|
||||
display: flex;
|
||||
gap: .6rem;
|
||||
align-items: flex-start;
|
||||
margin: .4rem 0 0;
|
||||
padding: .7rem .9rem;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 120, 143, .14);
|
||||
border: 1px solid rgba(0, 120, 143, .35);
|
||||
color: var(--ton-schrift, #e8ede9);
|
||||
font-size: .92rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ef-tipp .bi { color: #35b6cf; margin-top: .1rem; }
|
||||
|
||||
/* Fuss */
|
||||
.ef-fuss {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.ef-punkte-nav {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.ef-punkt {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(138, 148, 158, .3);
|
||||
cursor: pointer;
|
||||
transition: background .15s, transform .15s;
|
||||
}
|
||||
.ef-punkt.neuer-teil { margin-left: 10px; }
|
||||
.ef-punkt.aktiv { background: var(--ton-sonne, #f0b429); transform: scale(1.35); }
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.ef-folie.mit-bild.form-handy,
|
||||
.ef-folie.mit-bild.form-breit { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
|
||||
.ef-folie { padding: 1rem; min-height: 0; }
|
||||
.form-handy .ef-rahmen { max-width: 280px; }
|
||||
.ef-titel { font-size: 1.4rem; }
|
||||
.ef-kopf .form-select.ef-kapitel { margin-left: 0; flex: 1 1 12rem; }
|
||||
.ef-punkte-nav { display: none; }
|
||||
.ef-fuss { justify-content: space-between; position: sticky; bottom: 0; padding: .6rem 0; background: var(--ton-grund, #191d20); z-index: 5; }
|
||||
}
|
||||
|
||||
/* Ansicht umschalten: eine Klasse mehr als Bootstrap (solar.css laedt vorher). */
|
||||
.zl-ansicht .btn.active {
|
||||
background: rgba(0, 120, 143, .25);
|
||||
|
||||
Reference in New Issue
Block a user