Teljes front-end UI ráncfelvarrás a négy shortcode-on. Három nagy blokkban:
(1) vizuális polish + design nyelv illesztés, (2) az imos kalkulátor
összehasonlító táblázata újratervezve delta oszloppal, (3) diagramok
kitisztítva. Az admin beállítás oldal, a shortcode API és a számítási
logika változatlan — a [anest_*] shortcode-okat használó oldalak a
frissítés után is ugyanúgy renderelődnek, csak jobban néznek ki.
Módosítva
1) Vizuális polish + design nyelv illesztés
- A design token-készlet igazodik az
anest.cegem360.huhub kártyáihoz
(Advanced Material, Szoftver megoldások): közös#18576Fteal, közös
#e5e7ebkeret, közös#f3f5f7softbg, közös hover shadow, közös
uppercase pill (10px/letter-spacing: 0.05em/radius: 99px) és
gomb (14px 600/letter-spacing: 0.05em/radius: 4px) formula. - Csoportosítás tónussal, nem árnyékkal: minden shortcode instance egy
halvány#f3f5f7burokba kerül. A belső kártyák elvesztik a nyugalmi
árnyékot — a tónuskontraszt viszi a szeparációt, kevesebb vizuális
zaj. Hoveren visszatér a hub-jellegű shadow (interakció visszajelzés). - Baloldali szövegigazítás root szinten (
.anest-calcalatt minden
h1-h4, p, label, ul, ol, dl elem), hogy a Flatsometext-align: center
öröklődése ne rendezze középre a kártyák tartalmát. text-transform: noneadt,dd,th,td,captionés kártya-
címekre — a Flatsome uppercase kényszere („KISZÁLLÁSI DÍJ",
„RÁFORDÍTOTT IDŐ [H]") olvashatatlan hosszú magyar szövegben, most
vegyes betűben marad. A szándékos verzálbetűs elemek (pill jelvények,
CTA gomb) sajáttext-transform: uppercaseszabályt kapnak.- Kiszállás kalkulátor 2 oszlopos elrendezése: a bal oldalon a beviteli
mezők (géptípus + cím), jobb oldalon az „Összesen" tealbeli
eredménykártya.grid-template-areas-szel, 640px alatt automatikusan
1 oszlop. - Szerviz árkártyák sor-igazítása CSS subgrid-del: a MUNKADÍJ,
KISZÁLLÁSI DÍJ, KM DÍJ sorok egy vonalban vannak mind a négy kártyán
keresztül, akkor is, ha az „Advanced material megmunkáló gép" cím
2 sorra tör. A Távsupport hiányzó (kiszállási, km) sorai üresen
maradnak, de a helyet lefoglalják. - Csomagválasztó kiválasztott állapot: halvány teal háttér + jobb felső
sarokban✓jelvény (adat-URI SVG, nincs webfont függés). - Beüzemelési kártyák: az „óra" jelvény flex-wrap-pel a cím jobb szélén
áll, hosszabb címeknél (pl. „Speciális CNC-k") automatikusan új sorra
tör — nem kényszeríti a magyar szót csúnya kötőjeles törésre. - Ár-cellák (
<dd>)margin-left: autorévén akkor is a jobb szélhez
tapadnak, ha új sorra fordulnak: ajustify-content: space-between
egysoros esetet oldott meg, kétsorosat nem. - Egységes number-input + mértékegység horgony a Munkabérek / Gyártási
paraméterek rácsban: a wrapper flex-column, a<input>margin-top: auto-val a cella aljára tapad. A mértékegység (Ft/óra, db, Ft/€) az
új.anest-calc__unit<span>-be került, hogy a flex column ne
tördelje szét az inputtól. - Szekció fejlécek: aláhúzás helyett bal 4px teal accent bar, 1.35rem
betűméret. Ár-kiolvasás és összefoglaló szövegek (readout,
summary) softbg + bal accent bar.
2) Egységes összehasonlító táblázat (imos kalkulátor)
- A két külön táblázat (Hagyományos gyártás / imos iX gyártás)
helyett egy egységes 6 oszlopos táblázat, oszlopcsoport-fejlécekkel:
Kiadás / bevétel | Hagyományos (Idő + Összeg) | imos iX (Idő + Összeg)
| Megspórolt. AMegspóroltoszlop cellái színkódoltak:- zöld (
.is-savings) — pozitív delta (imos olcsóbb, megtakarítás), - piros (
.is-cost) — negatív delta (imos drágább, pl. nyomonkövetés), - semleges gondolatjel — nincs különbség vagy nincs adat.
A színkód mellett jel prefix (+/−) is jár, hogy színvakoknak is
egyértelmű legyen (a11y).
- zöld (
- Új
setDeltaCell()azimos.js-ben, ami hozzáadja a.is-savings / .is-cost / .is-zeroosztályokat és formázza az előjelet — a
renderTables()a hagyomanyos - imos különbséget minden sorra
automatikusan kiszámolja.
3) Diagramok kitisztítva
- Vonal-diagramokon (ROI, Termelésnövekedés) kikapcsolt per-pont
dataLabels: az összes pontnál kilógó szám ráfeküdt a trendvonalra,
olvashatatlanná téve. Helyette markers + tooltip: a felhasználó
hoverre / mobiltapintásra kapja az értéket. - Minden diagram alcímet kapott (roiSubtitle, timeSubtitle,
growthSubtitle), hogy egyértelmű legyen, mit mutat és milyen
egységben — a puszta címek („Gyártási idő (h/év)") kontextus nélkül
álltak. - Éves gyártási idő diagramon a „megspórolt" oszlop most a táblázat
delta zöldjét kapja (#059669) — vizuális kapocs a lenti Megspórolt
oszloppal. Rounded corners + 55% column width, kevésbé bulky. - Termelésnövekedés diagram: a hagyományos gyártás pontozott, halvány
vonal, az imos vastag, tömör teal — a szem gyorsan látja, melyik
trajektória a győztes. - Diagram-panelek fehér burokban a szürke csoport-tónuson belül,
hogy a vizualizációk megkülönböztetett kártyákként olvassanak.
Hozzáadva
- Design token-készlet a
.anest-calcroot alatt:--anest-accent,
--anest-accent-soft,--anest-accent-hover,--anest-text,
--anest-text-muted,--anest-border,--anest-bg-soft,
--anest-radius,--anest-radius-btn,--anest-shadow-sm/-md/-accent,
--anest-transition. Egy helyen hangolhatók. .anest-calc__unit— mértékegység-<span>az<input>után az imos
kalkulátor számmezői mellett.Megspóroltoszlop az imos összehasonlító táblázatban delta
értékekkel + színkódolt osztályokkal.roiSubtitle,timeSubtitle,growthSubtitlestring kulcsok a
shortcode configstringstömbjében a diagram alcímekhez.