/* ========================================================================== EnergyNexus — ViewDot 700 als bedienbarer Nachbau, Gestaltung Gehoert zu stil/viewdot.js. Dasselbe Vorgehen wie bei stil/powerdot.css fuer die beiden runden Dots: diese Datei traegt Gehaeuse, Rahmen und die Bedienelemente DANEBEN, alles INNERHALB der Scheibe kommt aus dem Geraet. HERKUNFT. Der ViewDot ist der einzige Dot, dessen Oberflaeche VOR der Firmware als HTML dastand — PowerDot_700_View/entwurf_oberflaeche_2026-08-18 .html. Die Firmware wurde daraus vermessen (ui.cpp sagt es woertlich). Der Nachbau geht denselben Weg zurueck, nur ist jetzt das GERAET die Vorlage: was hier steht, ist gegen Bilder vom laufenden Panel geprueft. Der Nachbau rechnet innen in Geraetepunkten (1024 x 600). Die Skalierung nach aussen macht eine einzige transform auf .vd-flaeche; jede Stelle aus der Firmware bleibt dadurch unveraendert im Skript. ========================================================================== */ .viewdot{ margin:0; display:flex;flex-direction:column;align-items:flex-start;gap:16px; /* min-width:0 hebt das stillschweigende min-width:auto auf — siehe powerdot.css, dieselbe Falle. */ min-width:0;max-width:100%; } /* Gehaeuse --------------------------------------------------------------- Der Rand liegt im box-shadow, nicht im Kasten: so bleibt die Scheibe genau --vd-breit gross und die Umrechnung auf Geraetepunkte stimmt. Ein Panel hat einen schmaleren Rand als ein runder Dot — 8 px statt 10. */ .vd-geraet{ width:var(--vd-breit,1024px);height:auto;aspect-ratio:1024/600; max-width:calc(100% - 18px); margin:9px;border-radius:14px; background:#000;position:relative;overflow:hidden; touch-action:none;-webkit-user-select:none;user-select:none; box-shadow: 0 0 0 1px rgba(235,234,231,.12), 0 0 0 8px #151515, 0 0 0 9px rgba(235,234,231,.10), 0 22px 50px rgba(0,0,0,.55); } .vd-geraet:focus-visible{ outline:none; box-shadow: 0 0 0 1px rgba(235,234,231,.12), 0 0 0 8px #151515, 0 0 0 11px var(--hot,#ff5a1f), 0 22px 50px rgba(0,0,0,.55); } .vd-flaeche{ position:absolute;left:0;top:0;width:1024px;height:600px; transform:scale(var(--vd-skala,1));transform-origin:0 0; /* Die Schrift des Geraets. Montserrat liegt nicht auf der Website — sie steht trotzdem zuerst, weil ein Besucher sie haben kann; dahinter die Hausschrift. Genau wie in powerdot.css. */ font-family:Montserrat,'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:500;line-height:1;letter-spacing:0; } /* DIE SEITE DARF NICHT HINEINREDEN --------------------------------------- Der Entwurf lief auf einer nackten Seite. Hier sitzt derselbe Aufbau unter stil.css — und deren `h2{font-size:clamp(28px,3.8vw,44px)}` traf den Seitentitel im Geraet, `p{margin:0 0 18px}` jede Beschriftung darin, `h1,h2,h3{hyphens:auto}` trennte "Übersicht". Deshalb hier ein Riegel. Er steht VOR den Geraeteregeln: `.vd-flaeche *` und `.n-lbl` haben dieselbe Spezifitaet, es gewinnt also die spaetere — und das soll das Geraet sein. Und box-sizing muss mit, das stand im Entwurf in der Werkbank. */ .vd-flaeche *,.vd-flaeche *::before,.vd-flaeche *::after{box-sizing:border-box;} .vd-flaeche *{ margin:0;padding:0;max-width:none; text-transform:none;letter-spacing:inherit; hyphens:manual;text-wrap:wrap; font-family:inherit; } /* Leiste daneben — wortgleich mit powerdot.css, damit beide Nachbauten dieselben Bedienelemente haben. */ .vd-leiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .vd-schalter{ font:inherit;font-size:13px;line-height:1; display:inline-flex;align-items:center;gap:9px; padding:9px 14px;border-radius:999px;cursor:pointer; color:var(--bone,#ebeae7);background:transparent; border:1px solid var(--umriss,rgba(235,234,231,.38)); } .vd-schalter::before{ content:"";width:8px;height:8px;border-radius:50%; background:var(--umriss,rgba(235,234,231,.38)); } .vd-schalter[aria-pressed="true"]::before{background:var(--gut,#5bd08a);} .vd-schalter:hover{border-color:var(--bone,#ebeae7);} .vd-nurton{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* ========================================================================== Ab hier das GERAET. Uebernommen aus dem Entwurf, Palette auf PD700/farben.h. ========================================================================== */ /* ============================================================ Gerät — eigene, feste Palette (Produktentwurf) ============================================================ */ .screen{ /* SCHWARZ, nicht dunkelblau (27.08.2026). Im dunklen Fahrzeug leuchtet die Scheibe sonst flaechig; Schwarz laesst nur die Karten stehen. Leiste und Karten behalten ihren Blaustich - sie sollen sich abheben. */ /* Die Palette ist die des Geraets (PD700/farben.h), Wert fuer Wert. Sie steht hier als Hexwerte und NICHT ueber die Variablen der Website: es sind Geraetefarben, und wenn die Website ihren Ton wechselt, darf sich der Nachbau nicht mitdrehen. Der Entwurf hatte hier noch blaustichige Karten (#101B2A); am 04.09.2026 ist das Geraet auf den neutralen Markenton umgestellt worden. */ --bg:#000000; /* C_BG — schwarz, nicht dunkelblau */ --rail:#101010; /* C_RAIL */ --card:#101010; /* C_CARD */ --card2:#1A1A1A; /* C_CARD2 — Knoepfe SITZEN auf einer Karte */ --line:#202E40; /* C_LINE */ --line2:#2E3E52; /* C_LINE2 */ --tx:#EBEAE7; /* C_TX = --bone auf energynexus.at */ --mu:#7E93AB; --mu2:#556A80; --acc:#35A7E8; --solar:#F2B33D; --batt:#31C77E; --grid:#8A9CB2; --ac:#4CC2F0; --dc:#9B8CF0; --gen:#556A80; --warn:#FF9C3D; --alarm:#FF5F52; position:relative; width:1024px;height:600px; border-radius:9px; overflow:hidden; background:var(--bg); color:var(--tx); font-size:14px;line-height:1.35; display:flex; isolation:isolate; transition:filter .35s; } .screen::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:60; background:radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.42) 100%); } .screen b,.screen strong{font-weight:650} .screen .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* ---- Navigationsleiste ---- */ .rail{ width:84px;flex:0 0 84px;background:var(--rail); border-right:1px solid var(--line); display:flex;flex-direction:column;align-items:center; padding:9px 0 6px;gap:1px;z-index:20; } .mark{ width:30px;height:30px;border-radius:50%;margin-bottom:8px;flex:0 0 30px; background:conic-gradient(from 140deg,var(--acc),#1B6FA8 58%,rgba(140,175,210,.16) 76%,rgba(140,175,210,.16) 100%); -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0); mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0); animation:spin 9s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .nav{ width:76px;height:60px;border:0;background:none;color:var(--mu); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; border-radius:9px;cursor:pointer;position:relative; font:inherit;font-size:9px;font-weight:600;letter-spacing:.05em; transition:color .18s,background .18s; } .nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .nav span{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav:hover{color:var(--tx)} .nav[aria-current="true"]{color:var(--tx);background:rgba(53,167,232,.11)} .nav[aria-current="true"]::before{ content:"";position:absolute;left:-4px;top:16px;bottom:16px;width:3px; border-radius:0 3px 3px 0;background:var(--acc); } /* ---- Hauptbereich ---- */ .main{flex:1;display:flex;flex-direction:column;min-width:0} /* GEBUNDEN AN .viewdot (18.09.2026). Der Seitenkopf der Website heisst ebenfalls .top: ungebunden machte diese Regel ihn auf der Produktseite zu einer 56 px hohen Flexzeile, das Menue rutschte neben die Wortmarke. Dasselbe fuer .badge und .dot, die dort auch ausserhalb vorkommen. */ .viewdot .top{ height:56px;flex:0 0 56px;display:flex;align-items:center;gap:14px; padding:0 22px;border-bottom:1px solid var(--line); } .viewdot .top h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em} .viewdot .top .sub{font-size:11.5px;color:var(--mu);margin-top:1px} .viewdot .top .grow{flex:1} .pill{ display:flex;align-items:center;gap:6px;height:28px;padding:0 10px; border-radius:8px;background:var(--card);border:1px solid var(--line); font-size:12px;color:var(--mu); } .pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pill.ok{color:var(--batt)} .clock{font-size:28px;font-weight:650;color:var(--tx);letter-spacing:-.02em} /* Die Uhr steht mittig ueber der Seite und ist die groesste Zahl der Kopfzeile - man sieht sie aus drei Metern. Rechts daneben Wochentag und Datum: im Wohnmobil weiss man die Uhrzeit noch, den Wochentag nach drei Tagen nicht mehr. Ganz rechts Sonnenauf- und -untergang, selbst gerechnet (NOAA), ohne Abfrage bei irgendeinem Dienst. */ .clockpill{position:absolute;left:50%;transform:translateX(-50%);height:40px; padding:0 16px;gap:12px;border-radius:10px} .cdate{line-height:1.15} .cdate b{display:block;font-size:12px;font-weight:600;color:var(--tx)} .cdate span{display:block;font-size:10px;color:var(--mu2)} .csun{display:flex;align-items:center;gap:7px;padding-left:12px; border-left:1px solid var(--line)} .csun svg{width:13px;height:13px;color:var(--solar)} .csun div{line-height:1.15;font-size:10px} .csun div b{display:block;font-weight:600;color:var(--tx)} .csun div span{display:block;color:var(--mu2)} .iconbtn{ width:30px;height:30px;border-radius:8px;border:1px solid var(--line); background:var(--card);color:var(--mu);cursor:pointer; display:grid;place-items:center;position:relative; } .iconbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .iconbtn:hover{color:var(--tx);border-color:var(--line2)} .viewdot .badge{ position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px; border-radius:8px;background:var(--warn);color:#111; font-size:9.5px;font-weight:700;display:grid;place-items:center; } .body{flex:1;position:relative;overflow:hidden} .pg{ position:absolute;inset:0;padding:22px;overflow:hidden; display:none;flex-direction:column;gap:16px; } .pg.on{display:flex;animation:slidein .32s cubic-bezier(.22,.7,.3,1)} .pg.rev{animation-name:slideinrev} @keyframes slidein{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}} @keyframes slideinrev{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}} /* ---- Karten ---- */ .card{ background:var(--card);border:1px solid var(--line);border-radius:12px; padding:14px 16px;position:relative;overflow:hidden; transition:transform .12s ease, border-color .18s; } .card.tap{cursor:pointer} .card.tap:active{transform:scale(.986)} .lbl{ font-size:9.5px;font-weight:650;letter-spacing:.15em;text-transform:uppercase; color:var(--mu2); } .big{font-size:38px;font-weight:650;line-height:1;letter-spacing:-.03em} .unit{font-size:14px;font-weight:550;color:var(--mu);margin-left:5px;letter-spacing:0} /* ---- Energiefluss ---- */ .flow{position:relative;width:892px;height:380px;flex:0 0 380px} .flow svg.wires{position:absolute;inset:0;width:892px;height:380px} .node{ position:absolute;display:flex;align-items:center;gap:11px;padding:0 13px; background:var(--card);border:1px solid var(--line);border-radius:12px; transition:border-color .3s, opacity .3s; } .node.idle{opacity:.58} .n-ico{ width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center; background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c); } .n-ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .n-lbl{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--mu);text-transform:uppercase} .n-val{font-size:22px;font-weight:650;line-height:1.15;letter-spacing:-.025em;margin-top:1px} .n-val span{font-size:11.5px;font-weight:550;color:var(--mu);margin-left:4px;letter-spacing:0} .n-sub{font-size:10.5px;color:var(--mu2);margin-top:1px} .hub{ position:absolute;left:388px;top:92px;width:116px;height:116px;border-radius:50%; background:var(--card);border:1px solid var(--line); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; } .hub svg.dev{width:22px;height:22px;stroke:var(--acc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .hub .hv{font-size:19px;font-weight:650;letter-spacing:-.02em;margin-top:3px} .hub .hn{font-size:9px;color:var(--mu2);letter-spacing:.05em} /* Das Fingerzeichen ------------------------------------------------------ Oben rechts auf den drei Bausteinen, die auf einen langen Druck reagieren: Netz, Wallbox und Batterie. Im Druck springt es auf die Akzentfarbe, zusammen mit dem Rand der Karte — am Geraet macht das LV_STATE_PRESSED, hier :active. */ .fz{position:absolute;top:7px;right:8px;pointer-events:none;z-index:3;} .fz svg{display:block;width:16px;height:16px;stroke:var(--mu2);fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .lang{cursor:pointer;} .lang:active{border-color:var(--acc);background:#141922;} .lang:active .fz svg{stroke:var(--acc);} /* Der Schein um die Zentrale -------------------------------------------- EINE Lage, und dieselbe Kurve wie am Geraet: dort rechnet schein_bild() in ui.cpp die Deckung als (1-t)^1,9 zwischen r=50 und r=106, hoechstens 0,18. Die Stuetzstellen hier sind genau diese Kurve, an vier Stellen abgelesen - so sehen Nachbau und Geraet gleich aus. Am Geraet ist das ein Bild im PSRAM mit einem Bayer-Versatz darauf, weil der Bildspeicher RGB565 ist und ein gerechneter Verlauf darin sichtbare Stufen bekommt. Der Browser rechnet in acht Bit je Kanal und rastert selbst - hier reicht der Verlauf. */ .hub{--schein:.45} .hub::before{ content:"";position:absolute;inset:-50px;border-radius:50%; pointer-events:none;z-index:-1; opacity:var(--schein);transition:opacity .8s ease; background:radial-gradient(circle, rgba(159,196,232,.180) 46%, rgba(159,196,232,.105) 59%, rgba(159,196,232,.048) 72%, rgba(159,196,232,.014) 85%, transparent 98%); } /* Ein Saum an der Scheibe selbst - ohne ihn sitzt sie wie ausgeschnitten im Licht. Am Geraet macht das der Rand der Karte. */ .hub{box-shadow:0 0 0 1px rgba(159,196,232,.10)} .battnode{ position:absolute;left:326px;top:272px;width:240px;height:104px; background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden; display:flex;align-items:center;gap:14px;padding:0 16px; } .battnode .vessel{position:absolute;inset:0;z-index:0;opacity:.62} /* Schleier, damit die Schrift über der Welle lesbar bleibt */ .battnode .scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(96deg,rgba(16,27,42,.74) 14%,rgba(16,27,42,.36) 58%,rgba(16,27,42,.14)); } .battnode .bn-in{position:relative;z-index:2;display:flex;align-items:center;gap:14px;width:100%; text-shadow:0 1px 6px rgba(4,9,15,.75)} /* ---- Streifen unten ---- */ .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;flex:1;min-height:0} .tile{display:flex;align-items:center;gap:13px} .tile .tv{font-size:25px;font-weight:650;letter-spacing:-.025em;line-height:1.1} .tile .tv span{font-size:12px;font-weight:550;color:var(--mu);margin-left:4px;letter-spacing:0} /* ---- Ringe ---- Die Maske schneidet auch Kindelemente weg. Ein Ring mit Beschriftung in der Mitte braucht deshalb ::before für den Ring und ein eigenes Kind für den Text. */ .ring2{ position:relative;border-radius:50%;flex:0 0 auto; background:conic-gradient(from 150deg,var(--rc,var(--acc)) 0 calc(var(--deg,0)*1deg),rgba(255,255,255,.06) 0 240deg,transparent 240deg); -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--tw,9px)),#000 0); mask:radial-gradient(farthest-side,#0000 calc(100% - var(--tw,9px)),#000 0); } .gauge{position:relative;flex:0 0 auto} .gauge::before{ content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 150deg,var(--rc,var(--acc)) 0 calc(var(--deg,0)*1deg),rgba(255,255,255,.06) 0 240deg,transparent 240deg); -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--tw,9px)),#000 0); mask:radial-gradient(farthest-side,#0000 calc(100% - var(--tw,9px)),#000 0); } .gauge .gin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px} /* Ladestand in der Batteriekachel der Uebersicht. Am Geraet eine grosse Zahl mit kleinem Prozentzeichen, kein Ring — siehe viewdot.js. */ .bn-soc{display:flex;align-items:baseline;gap:4px;flex:0 0 auto;padding-right:6px} .bn-soc b{font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1} .bn-soc span{font-size:14px;font-weight:600;color:var(--mu)} /* ---- Behälter mit Wellen ---- */ .vessel{position:relative;overflow:hidden} .vessel svg{position:absolute;inset:0;width:100%;height:100%} /* ---- Diagramme ---- */ .chart{position:relative;width:100%;flex:1;min-height:0} .chart svg{position:absolute;inset:0;width:100%;height:100%} .legend{display:flex;gap:16px;flex-wrap:wrap} .lg{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mu);cursor:pointer;user-select:none} .lg i{width:9px;height:9px;border-radius:2.5px;background:var(--c);display:block} .lg.off{opacity:.35} /* ---- Listen ---- */ .list{display:flex;flex-direction:column;overflow-y:auto;min-height:0;flex:1} .list::-webkit-scrollbar{width:4px} .list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px} .row{ display:flex;align-items:center;gap:14px;padding:11px 14px; border-bottom:1px solid var(--line);cursor:pointer; } .row:last-child{border-bottom:0} .row:hover{background:var(--card2)} .row .r-ico{width:32px;height:32px;flex:0 0 32px;border-radius:8px;display:grid;place-items:center;background:var(--card2);color:var(--acc)} .row .r-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .row .r-n{font-size:13.5px;font-weight:600} .row .r-s{font-size:11px;color:var(--mu2);margin-top:1px} .row .r-v{font-size:14px;font-weight:600;text-align:right} .tag{ font-size:9px;font-weight:650;letter-spacing:.08em;text-transform:uppercase; padding:2.5px 6px;border-radius:5px;background:var(--card2);color:var(--mu); border:1px solid var(--line); } .viewdot .dot{width:7px;height:7px;border-radius:50%;background:var(--batt);flex:0 0 7px} .viewdot .dot.w{background:var(--warn)} .viewdot .dot.o{background:var(--mu2)} /* ---- Bedienelemente ---- */ .sw{ width:42px;height:24px;border-radius:13px;background:var(--card2); border:1px solid var(--line2);position:relative;cursor:pointer;flex:0 0 42px; transition:background .2s,border-color .2s; } .sw::after{ content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%; background:var(--mu);transition:transform .2s,background .2s; } .sw[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 35%,transparent);border-color:var(--acc)} .sw[aria-pressed="true"]::after{transform:translateX(18px);background:var(--acc)} .slider{ -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px; background:var(--card2);outline:none;cursor:pointer; } .slider::-webkit-slider-thumb{ -webkit-appearance:none;width:18px;height:18px;border-radius:50%; background:var(--acc);border:3px solid var(--card);cursor:pointer; } .seg{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden} .seg button{ font:inherit;font-size:11.5px;font-weight:600;padding:5px 13px;border:0;cursor:pointer; background:transparent;color:var(--mu);transition:background .16s,color .16s; } .seg button[aria-pressed="true"]{background:var(--acc);color:#04121D} .swatches{display:flex;gap:9px} .sw2{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0} .sw2[aria-pressed="true"]{border-color:var(--tx)} /* ---- Überlagerungen ---- */ .ov{ position:absolute;inset:0;z-index:70;background:rgba(4,9,15,.72); display:none;align-items:center;justify-content:center;padding:34px; backdrop-filter:blur(3px); } .ov.on{display:flex;animation:fade .2s} @keyframes fade{from{opacity:0}to{opacity:1}} .sheet{ background:var(--card);border:1px solid var(--line2);border-radius:14px; width:100%;max-width:680px;max-height:100%;overflow:auto;padding:18px 20px; } .sheet h3{margin:0 0 3px;font-size:15px;font-weight:650} .sheet p{margin:0 0 14px;font-size:12px;color:var(--mu);line-height:1.55} .sheet table{width:100%;border-collapse:collapse;font-size:11.5px} .sheet th{ text-align:left;padding:7px 9px;color:var(--mu2);border-bottom:1px solid var(--line); font-size:9.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase; } .sheet td{padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tx)} .sheet td:nth-child(2){color:var(--mu)} .sheet tr:last-child td{border-bottom:0} .sheet .close{margin-top:14px} .dim{position:absolute;inset:0;z-index:65;background:#000;opacity:0;pointer-events:none;transition:opacity .5s} /* Der LVGL-Kasten liegt ausserhalb von .screen und muss die Seitentokens erben */ #ov-lvgl .sheet{ --card:var(--pg-chip); --card2:var(--pg-chip); --line:var(--pg-line); --line2:var(--pg-line); --tx:var(--pg-ink); --mu:var(--pg-mute); --mu2:var(--pg-mute); background:var(--pg-chip);border-color:var(--pg-line);color:var(--pg-ink); } #ov-lvgl code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px;padding:1px 5px;border-radius:4px; background:color-mix(in srgb,var(--pg-ink) 9%,transparent); } /* ── Camper-Uebersicht ───────────────────────────────────────────────────── Der Wagen steht schraeg, nicht von der Seite: eine Seitenansicht kann nicht raeumlich wirken, egal wieviel Schattierung darin steckt. Drei Flaechen mit drei Helligkeiten - Dach hell, Flanke mittel, Front dunkel - reichen dafuer. Auf dem Geraet wird dasselbe Bild EINMAL beim Seitenaufbau gerastert (592 x 330 im PSRAM) und liegt danach still; nur die Kacheln darueber bewegen sich. Die SVG hier ist aus derselben Projektion erzeugt wie camper.cpp - dieselben Koordinaten, dieselben Farben. */ .cam{position:relative;width:892px;height:504px} .cam .van{position:absolute;left:-16px;top:-16px;width:592px;height:330px} /* Eine Zahl, die neben einem Fahrzeug schwebt, gehoert zu nichts. Die Kachel sitzt in einer freien Ecke, und eine duenne Linie in der Zeichnung zeigt auf das Bauteil, um das es geht. Ihr Rand hat die Farbe dieses Bauteils. */ .cam .kch{position:absolute;height:48px;border-radius:10px;background:var(--card); border:1px solid var(--line);padding:7px 12px 0;box-sizing:border-box} .cam .kch .lbl{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600} .cam .kch .v{font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--tx);line-height:1.1} .cam .kch .v span{font-size:12px;font-weight:500;color:var(--mu);margin-left:4px} .cam .rechts{position:absolute;left:596px;top:0;width:296px} .cam .rechts .card{margin-bottom:12px;padding:14px 17px} .cam .zeile{position:absolute;left:0;top:342px;width:580px;height:156px;display:flex} .cam .zeile > div{flex:1;padding:20px 16px 0;border-left:1px solid var(--line)} .cam .zeile > div:first-child{border-left:none} .cam .zeile .v{font-size:34px;font-weight:650;letter-spacing:-.025em;color:var(--tx)} .cam .zeile .v span{font-size:12px;font-weight:500;color:var(--mu);margin-left:5px} .cam .zeile .sub{font-size:9.5px;color:var(--mu2);margin-top:14px;line-height:1.35} .cam .rz{display:flex;justify-content:space-between;font-size:12px;padding:3px 0} .cam .rz b{font-weight:500;color:var(--tx)} .cam .rz span{color:var(--mu)} @media (prefers-reduced-motion:reduce){ .mark,.hub .ring{animation:none} .pg.on{animation:none} } /* ---- Startbild (start.cpp) -------------------------------------------- Laeuft am Geraet beim Einschalten, bis alle gebrauchten Quellen geantwortet haben - laengstens 10 s. Hier zum Ansehen ueber den Knopf in der Leiste. Geometrie eins zu eins wie in start.cpp: Mitte (512,236), Kranz r 212, Fortschritt r 190, Zierboegen r 172/153/134. */ #splash{ position:absolute;inset:0;z-index:70;background:var(--bg); opacity:0;pointer-events:none;transition:opacity .34s; } #splash.on{opacity:1;pointer-events:auto} #splash svg{width:100%;height:100%;display:block} #splash text{font-family:inherit;fill:var(--tx)} .sp-z{transform-origin:512px 236px;animation:sp-dreh 3.4s linear infinite} .sp-z2{animation:sp-dreh-r 3.9s linear infinite} .sp-z3{animation:sp-dreh 2.1s linear infinite} .sp-z1 circle{animation:sp-len1 2s ease-in-out infinite alternate} .sp-z2 circle{animation:sp-len2 2.3s ease-in-out infinite alternate} @keyframes sp-dreh { to { transform:rotate(360deg) } } @keyframes sp-dreh-r{ to { transform:rotate(-360deg) } } @keyframes sp-len1{ from{stroke-dasharray:90 991} to{stroke-dasharray:900 181} } @keyframes sp-len2{ from{stroke-dasharray:80 881} to{stroke-dasharray:801 160} } @media (prefers-reduced-motion: reduce){ .sp-z,.sp-z1 circle,.sp-z2 circle{animation:none} } /* Ruhige Darstellung: ohne Bewegung keine Uebergaenge. Der Selbstlauf wird im Skript abgeschaltet, nicht hier. */ @media (prefers-reduced-motion:reduce){ .vd-flaeche .pg{animation:none!important;} .vd-flaeche .parts circle{animation:none!important;} }