/* ================================================================== tv-mode.css — Styl ekranu TV (showroom display) dla pojedynczej instalacji Ladowany TYLKO przez public/tv.php (nie przez main.css). Izolowany — wlasne tokeny. #TAG: TV_MODE STYLE PRODUKCJA ================================================================== */ /* ================================================================== Design tokens — domyslny motyw ciemny, light overrides w [data-theme="light"] ================================================================== */ :root, [data-theme="dark"] { --tv-bg-1: #0a1a14; /* tlo gorne */ --tv-bg-2: #050d0a; /* tlo dolne */ --tv-panel: rgba(255,255,255,0.04); --tv-panel-border: rgba(255,255,255,0.08); --tv-text-primary: #e8f5e9; --tv-text-secondary: #8aa89a; --tv-text-muted: #5a7065; --tv-accent-green: #4ade80; /* moc, OK, dome safe */ --tv-accent-amber: #f5c453; /* ostrzezenia, efektywnosc */ --tv-accent-red: #ef4444; /* alerty */ --tv-tank-fill: #a0742a; /* brown jak w PowerBI */ --tv-tank-fill-2: #c8923a; /* highlight cieczy */ --tv-tank-bg: rgba(160,116,42,0.12); --tv-tank-stroke: rgba(255,255,255,0.18); --tv-gas-fill: #4ade80; --tv-glow: 0 0 24px rgba(74,222,128,0.35); --tv-shadow-card: 0 8px 32px rgba(0,0,0,0.4); --tv-radius: 18px; } /* Motyw jasny — przelaczany przez data-theme="light" na */ [data-theme="light"] { --tv-bg-1: #f4f7f5; --tv-bg-2: #e3ebe6; --tv-panel: rgba(0,0,0,0.03); --tv-panel-border: rgba(0,0,0,0.10); --tv-text-primary: #0f2415; --tv-text-secondary: #4d6a5a; --tv-text-muted: #8a9e93; --tv-accent-green: #16a34a; --tv-accent-amber: #d97706; --tv-accent-red: #dc2626; --tv-tank-fill: #a0742a; --tv-tank-fill-2: #c8923a; --tv-tank-bg: rgba(160,116,42,0.08); --tv-tank-stroke: rgba(0,0,0,0.20); --tv-gas-fill: #16a34a; --tv-glow: 0 0 14px rgba(22,163,74,0.18); --tv-shadow-card: 0 6px 20px rgba(0,0,0,0.10); --tv-radius: 18px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; color: var(--tv-text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; } /* Tlo: zdjecie instalacji (z --tv-bg-photo ustawianego inline w tv.php) + gradient overlay (mleczne). background-color jako fallback gdy brak --tv-bg-photo (zamiast trzeciej warstwy gradient ktora SOLIDNA przykrywala foto). */ body { background-color: var(--tv-bg-2); /* fallback solid color (widoczny gdy brak foto) */ background-image: linear-gradient(135deg, rgba(10,26,20,0.60) 0%, rgba(5,13,10,0.70) 100%), var(--tv-bg-photo, none); background-size: auto, cover; background-position: 0 0, center center; background-repeat: no-repeat, no-repeat; background-attachment: scroll, fixed; } [data-theme="light"] body { background-image: linear-gradient(135deg, rgba(244,247,245,0.78) 0%, rgba(227,235,230,0.85) 100%), var(--tv-bg-photo, none); } /* ================================================================== Layout glowny — grid 1920x1080, skaluje sie do wiekszych ekranow ================================================================== */ .tv-stage { display: grid; grid-template-rows: 90px 1fr 240px; /* footer wyzszy zeby pomiescil wieksze etykiety */ width: 100vw; height: 100vh; padding: 24px 32px; gap: 20px; } /* ---- HEADER ---- */ .tv-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .tv-header-left { display: flex; align-items: center; gap: 24px; } .tv-logo { display: flex; align-items: center; justify-content: center; height: 72px; padding: 6px 18px; border-radius: 12px; /* Subtelne jasne tlo pod logo — radial gradient z jasnym srodkiem, wzmocnione delikatnym glow (box-shadow inset) zeby logo odznaczalo sie na ciemnym TV. */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0) 100%); box-shadow: inset 0 0 60px 8px rgba(255,255,255,0.06); } .tv-logo img { height: 100%; width: auto; filter: drop-shadow(0 0 14px rgba(74,222,128,0.35)); } .tv-installation { display: flex; flex-direction: column; gap: 6px; } .tv-installation-name { font-size: 38px; font-weight: 700; color: var(--tv-text-primary); line-height: 1.1; } .tv-installation-addr { font-size: 20px; color: var(--tv-text-secondary); } .tv-header-right { display: flex; align-items: center; gap: 32px; font-size: 18px; color: var(--tv-text-secondary); } .tv-weather { display: flex; align-items: center; gap: 18px; font-size: 28px; font-weight: 500; color: var(--tv-text-primary); } /* Aktualna pogoda: animowana ikona SVG obok temperatury */ .tv-weather-now { display: inline-flex; align-items: center; gap: 8px; } .tv-weather-icon { display: inline-flex; line-height: 0; } .tv-weather-icon svg { display: block; } .tv-update-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 1px solid var(--tv-panel-border); border-radius: 999px; background: var(--tv-panel); font-size: 18px; font-weight: 500; } .tv-update-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tv-accent-green); box-shadow: 0 0 8px var(--tv-accent-green); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } /* Przelacznik motywu w naglowku */ .tv-theme-toggle { background: var(--tv-panel); border: 1px solid var(--tv-panel-border); color: var(--tv-text-secondary); font-family: inherit; font-size: 16px; font-weight: 500; padding: 8px 18px; border-radius: 999px; cursor: pointer; letter-spacing: 0.5px; transition: background 0.15s ease, color 0.15s ease; } .tv-theme-toggle:hover { background: var(--tv-panel-border); color: var(--tv-text-primary); } /* ================================================================== CENTRUM — schemat procesu (SVG) + stack kart energii ================================================================== */ .tv-process { position: relative; display: grid; grid-template-columns: 1fr 0.42fr; align-items: center; gap: 32px; padding: 0 32px; } .tv-process-svg { width: 100%; height: 100%; max-height: 900px; } /* wieksze zbiorniki — limit tylko przez wysokosc wiersza grid */ .tv-energy-stack { display: flex; flex-direction: column; gap: 16px; align-items: stretch; } .tv-power-card { background: linear-gradient(135deg, rgba(74,222,128,0.12) 0%, rgba(74,222,128,0.04) 100%); border: 1px solid rgba(74,222,128,0.3); border-radius: var(--tv-radius); padding: 24px 28px; text-align: center; box-shadow: var(--tv-shadow-card), inset 0 0 60px rgba(74,222,128,0.06); } .tv-power-value { font-size: 72px; font-weight: 800; line-height: 1; color: var(--tv-accent-green); text-shadow: var(--tv-glow); font-variant-numeric: tabular-nums; animation: power-pulse 4s ease-in-out infinite; } .tv-power-unit { font-size: 34px; font-weight: 400; opacity: 0.7; margin-left: 6px; } .tv-power-label { font-size: 18px; text-transform: uppercase; letter-spacing: 2px; color: var(--tv-text-secondary); margin-top: 10px; } .tv-engines-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 22px; color: var(--tv-text-primary); } .tv-engine-icon { font-size: 26px; } @keyframes power-pulse { 0%, 100% { text-shadow: 0 0 24px rgba(74,222,128,0.35); } 50% { text-shadow: 0 0 36px rgba(74,222,128,0.65); } } .tv-prod-card { background: var(--tv-panel); border: 1px solid var(--tv-panel-border); border-radius: var(--tv-radius); padding: 18px 22px; display: flex; align-items: center; gap: 16px; box-shadow: var(--tv-shadow-card); } .tv-prod-icon { font-size: 36px; opacity: 0.75; } .tv-prod-info { flex: 1; } .tv-prod-value { font-size: 40px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .tv-prod-month { font-size: 17px; color: var(--tv-accent-green); font-weight: 500; margin-top: 6px; font-variant-numeric: tabular-nums; } .tv-prod-label { font-size: 16px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--tv-text-secondary); margin-top: 6px; } /* ================================================================== DOLNY pasek — 3 liczniki + pasek miesieczny ================================================================== */ .tv-footer { display: grid; grid-template-columns: 1fr 1fr 1fr 2.4fr; gap: 20px; align-items: stretch; } .tv-counter { background: var(--tv-panel); border: 1px solid var(--tv-panel-border); border-radius: var(--tv-radius); padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: var(--tv-shadow-card); } .tv-counter-value { font-size: 56px; font-weight: 800; color: var(--tv-text-primary); font-variant-numeric: tabular-nums; line-height: 1.05; } .tv-counter-unit { font-size: 30px; font-weight: 400; color: var(--tv-text-secondary); margin-left: 10px; } .tv-counter-label { font-size: 22px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--tv-text-secondary); margin-top: 14px; font-weight: 600; } .tv-monthly { background: var(--tv-panel); border: 1px solid var(--tv-panel-border); border-radius: var(--tv-radius); padding: 16px 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--tv-shadow-card); } .tv-monthly-header { display: flex; align-items: center; justify-content: space-between; font-size: 17px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--tv-text-secondary); } .tv-monthly-total { font-size: 28px; font-weight: 700; color: var(--tv-text-primary); } .tv-uptime { color: var(--tv-accent-green); font-weight: 600; font-size: 18px; } .tv-efficiency { color: var(--tv-accent-amber); font-weight: 600; font-size: 18px; } /* Wartosci NIE dziedzicza uppercase z naglowka — jednostki SI musza zachowac case (kWh, MWh) */ .tv-monthly-total, .tv-uptime, .tv-efficiency { text-transform: none; letter-spacing: 0; } .tv-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; /* wyzsze slupki — nie wygladaja "grube" przy szerokim kontenerze */ margin-top: 12px; } .tv-bar { flex: 1; background: linear-gradient(180deg, var(--tv-accent-green) 0%, rgba(74,222,128,0.3) 100%); border-radius: 3px 3px 0 0; min-height: 4px; transition: height 0.3s ease; } /* ================================================================== SVG — etykiety, kontury, animacje ================================================================== */ .svg-label { font-family: 'Inter', sans-serif; fill: var(--tv-text-secondary); font-size: 32px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; } .svg-value { font-family: 'Inter', sans-serif; fill: var(--tv-text-primary); font-size: 50px; font-weight: 800; text-anchor: middle; } .svg-value-small { font-family: 'Inter', sans-serif; fill: var(--tv-text-primary); font-size: 38px; font-weight: 600; text-anchor: middle; } .svg-unit { font-family: 'Inter', sans-serif; fill: var(--tv-text-secondary); font-size: 28px; font-weight: 500; text-anchor: middle; } /* Kontury tankow — sterowane zmienna, adaptuja sie do motywu */ .tank-outline { stroke: var(--tv-tank-stroke); stroke-width: 2; fill: none; } .tank-outline-body { stroke: var(--tv-tank-stroke); stroke-width: 2; } /* Babelki gazu unoszace sie w reaktorze (12 sztuk z roznymi delay'ami) */ .bubble { fill: rgba(255,255,255,0.5); animation: bubble-rise 4s ease-in infinite; transform-origin: center; } .bubble.b1 { animation-delay: 0s; } .bubble.b2 { animation-delay: 1.3s; } .bubble.b3 { animation-delay: 2.6s; } .bubble.b4 { animation-delay: 0.7s; } .bubble.b5 { animation-delay: 3.1s; } .bubble.b6 { animation-delay: 0.4s; } .bubble.b7 { animation-delay: 1.8s; } .bubble.b8 { animation-delay: 2.2s; } .bubble.b9 { animation-delay: 3.5s; } .bubble.b10 { animation-delay: 1.0s; } .bubble.b11 { animation-delay: 2.8s; } .bubble.b12 { animation-delay: 0.2s; } @keyframes bubble-rise { 0% { transform: translateY(0) scale(0.4); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-180px) scale(1); opacity: 0; } } /* Fala na powierzchni cieczy */ .liquid-surface { animation: wave 3.5s ease-in-out infinite; transform-origin: center; } @keyframes wave { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.5px) scaleY(1.05); } } /* Kopula gazowa — subtelny puls */ .dome-fill { animation: dome-pulse 5s ease-in-out infinite; } @keyframes dome-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* ================================================================== TRANSITION ROTACJI — flip 3D miedzy instalacjami (?rotate=1) - tv-flip-in: startuje przy ladowaniu nowej strony (z tyłu, lewy → rotuje do przodu) - tv-flip-out: dodawane klasy przed redirect (przod → rotuje w prawo, znika) ================================================================== */ body.tv-flip-in { animation: tv-flip-in 700ms cubic-bezier(.2,.7,.3,1) both; transform-origin: center center; backface-visibility: hidden; } @keyframes tv-flip-in { 0% { opacity: 0; transform: perspective(1800px) rotateY(85deg) scale(0.88); filter: blur(6px); } 60% { opacity: 0.9; filter: blur(0); } 100% { opacity: 1; transform: perspective(1800px) rotateY(0deg) scale(1); filter: blur(0); } } body.tv-flip-out { animation: tv-flip-out 600ms cubic-bezier(.7,.3,.8,.6) both; transform-origin: center center; backface-visibility: hidden; } @keyframes tv-flip-out { 0% { opacity: 1; transform: perspective(1800px) rotateY(0deg) scale(1); filter: blur(0); } 100% { opacity: 0; transform: perspective(1800px) rotateY(-85deg) scale(0.88); filter: blur(6px); } } /* ================================================================== TABLET (TB336FU i podobne) — dostosowanie widoku TV =================================================================== Layout TV był projektowany pod 1920×1080. Na tablecie 1280×800 (CSS viewport) header 90px + footer 240px + paddings + gaps zajmowały ~440px, więc middle 1fr dostawał tylko ~360px na schematyczny SVG — wypychało to footer poza viewport i kafelki liczników były obcinane na dole. Ten blok zmniejsza wszystkie wymiary proporcjonalnie tak, żeby cały widok mieścił się w 800px wysokości tabletu landscape. Detekcja: (max-width: 1024px) LUB (touch device ≤1920px) — ta sama reguła co reszta tabletowych poprawek w responsive.css. Mouse-only monitory/TV (np. STB z myszką, 1920×1080) zachowują pełen rozmiar. */ @media (max-width: 1024px), (max-width: 1920px) and (hover: none) and (pointer: coarse) { /* Stage: ciasny grid, mniejszy footer + DVH zamiast VH. Krytyczne: na mobile Chrome `100vh` to wysokość natywna ekranu IGNORUJĄCA pasek adresu, który zjada ~80px. .tv-stage o wysokości 800px na ekranie 720px (po odjęciu chrome) wystawał poza widoczny obszar i footer wpadał pod pasek przeglądarki. `100dvh` (dynamic viewport height) liczy widoczny obszar uwzględniając chrome → footer wraca w widok. Fallback do 100vh dla starszych browserów. */ .tv-stage { grid-template-rows: 56px 1fr 145px; padding: 10px 16px; gap: 10px; height: 100vh; /* fallback */ height: 100dvh; /* nowoczesne — uwzględnia pasek adresu */ } /* Header */ .tv-logo { height: 48px; padding: 4px 12px; } .tv-installation-name { font-size: 22px; } .tv-installation-addr { font-size: 13px; } .tv-header-right { gap: 16px; font-size: 13px; } .tv-weather { font-size: 18px; gap: 10px; } .tv-update-badge { font-size: 13px; padding: 5px 12px; } .tv-theme-toggle { font-size: 12px; padding: 5px 12px; } /* Process (centrum) — zmniejsz padding boczny */ .tv-process { gap: 18px; padding: 0 12px; } .tv-process-svg { max-height: none; } /* Energy stack — mniejsze cyfry mocy + produkcji */ .tv-power-card { padding: 14px 18px; } .tv-power-value { font-size: 48px; } .tv-power-unit { font-size: 22px; } .tv-power-label { font-size: 13px; letter-spacing: 1.2px; margin-top: 4px; } .tv-engines-row { font-size: 16px; margin-top: 8px; gap: 6px; } .tv-engine-icon { font-size: 18px; } .tv-prod-card { padding: 12px 14px; gap: 10px; } .tv-prod-icon { font-size: 24px; } .tv-prod-value { font-size: 26px; } .tv-prod-month { font-size: 12px; margin-top: 2px; } .tv-prod-label { font-size: 11px; letter-spacing: 1px; margin-top: 2px; } /* Footer — 3 liczniki + bar chart */ .tv-footer { gap: 12px; } .tv-counter { padding: 10px 12px; } .tv-counter-value { font-size: 34px; } .tv-counter-unit { font-size: 18px; margin-left: 6px; } .tv-counter-label { font-size: 12px; letter-spacing: 0.8px; margin-top: 6px; } .tv-monthly { padding: 10px 14px; } .tv-monthly-header { font-size: 12px; letter-spacing: 0.8px; } .tv-monthly-total { font-size: 18px; } .tv-uptime, .tv-efficiency { font-size: 12px; } .tv-bars { height: 70px; margin-top: 6px; } /* SVG schematyk — mniejsze etykiety na tablecie */ .svg-label { font-size: 22px; letter-spacing: 1.2px; } .svg-value { font-size: 34px; } .svg-value-small { font-size: 26px; } .svg-unit { font-size: 20px; } }