| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| :root { |
| --bg: #16121e; |
| --panel: #221c2e; |
| --accent: #c8a24a; |
| --accent2: #7e57c2; |
| --text: #e8e2d5; |
| --muted: #9a8fae; |
| --wood-dark: #4a2c17; |
| --wood: #6b3f20; |
| --wood-light: #8a5630; |
| } |
|
|
| body { |
| font-family: "Segoe UI", system-ui, sans-serif; |
| background: radial-gradient(ellipse at top, #241b33 0%, var(--bg) 70%); |
| color: var(--text); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| header { text-align: center; padding: 18px 10px 6px; } |
| header h1 { |
| font-size: 2.2rem; |
| letter-spacing: 2px; |
| color: var(--accent); |
| text-shadow: 0 0 18px rgba(200, 162, 74, 0.35); |
| } |
| header h1 span { color: var(--accent2); } |
| .tagline { color: var(--muted); font-size: 0.9rem; margin-top: 2px; } |
|
|
| |
| .topbar { |
| display: flex; |
| gap: 10px; |
| justify-content: center; |
| align-items: center; |
| padding: 14px; |
| flex-wrap: wrap; |
| } |
| .topbar input, .topbar select { |
| background: var(--panel); |
| border: 1px solid #3a3050; |
| color: var(--text); |
| padding: 10px 14px; |
| border-radius: 8px; |
| font-size: 0.95rem; |
| min-width: 240px; |
| } |
| .topbar input:focus, .topbar select:focus { outline: 2px solid var(--accent2); } |
|
|
| #scanBtn { |
| background: linear-gradient(180deg, #d4af5a, #a67c2e); |
| color: #241a05; |
| border: none; |
| font-weight: 700; |
| font-size: 1.05rem; |
| letter-spacing: 1px; |
| padding: 10px 28px; |
| border-radius: 8px; |
| cursor: pointer; |
| box-shadow: 0 4px 14px rgba(200, 162, 74, 0.35); |
| transition: transform 0.1s, box-shadow 0.2s; |
| } |
| #scanBtn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,162,74,0.5); } |
| #scanBtn:disabled { opacity: 0.45; cursor: not-allowed; } |
|
|
| |
| main { |
| flex: 1; |
| display: grid; |
| grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.2fr); |
| gap: 24px; |
| padding: 10px 26px 26px; |
| max-width: 1400px; |
| width: 100%; |
| margin: 0 auto; |
| } |
| @media (max-width: 900px) { main { grid-template-columns: 1fr; } } |
|
|
| |
| .left { display: flex; flex-direction: column; gap: 18px; } |
|
|
| .camera-box { |
| position: relative; |
| background: #000; |
| border-radius: 12px; |
| overflow: hidden; |
| border: 2px solid #3a3050; |
| aspect-ratio: 4 / 3; |
| } |
| #video { width: 100%; height: 100%; object-fit: cover; display: block; } |
|
|
| #flash { |
| position: absolute; inset: 0; |
| background: #fff; opacity: 0; pointer-events: none; |
| transition: opacity 0.4s; |
| } |
| #flash.on { opacity: 0.9; transition: none; } |
|
|
| .camera-msg { |
| position: absolute; inset: 0; |
| display: flex; align-items: center; justify-content: center; |
| background: rgba(0,0,0,0.7); |
| color: var(--muted); |
| font-size: 0.95rem; |
| text-align: center; |
| padding: 14px; |
| } |
| .camera-msg.hidden { display: none; } |
| .camera-msg p { margin-bottom: 12px; } |
| #enableCamBtn { |
| background: linear-gradient(180deg, #8e6bd4, #5e3da8); |
| color: #fff; |
| border: none; |
| font-weight: 600; |
| font-size: 0.95rem; |
| padding: 10px 22px; |
| border-radius: 8px; |
| cursor: pointer; |
| } |
| #enableCamBtn:hover { filter: brightness(1.15); } |
|
|
| |
| .panel { |
| background: var(--panel); |
| border: 1px solid #3a3050; |
| border-radius: 12px; |
| padding: 18px; |
| } |
| .panel h2 { font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; } |
| .status { color: var(--muted); font-size: 0.92rem; min-height: 1.4em; } |
| .status.error { color: #e57373; } |
| .status.busy { color: var(--accent); } |
|
|
| .param-group { margin-top: 14px; } |
| .param-group h3 { |
| font-size: 0.85rem; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| color: var(--accent2); |
| border-bottom: 1px solid #3a3050; |
| padding-bottom: 4px; |
| margin-bottom: 8px; |
| } |
| dl { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 4px 14px; |
| font-size: 0.92rem; |
| } |
| dt { color: var(--muted); } |
| dd { color: var(--text); font-weight: 500; } |
|
|
| .uzasadnienie { |
| margin-top: 8px; |
| font-size: 0.88rem; |
| color: var(--muted); |
| font-style: italic; |
| } |
| .query { margin-top: 6px; font-size: 0.88rem; color: var(--accent); } |
|
|
| |
| .right { display: flex; align-items: flex-start; justify-content: center; } |
|
|
| .tv { |
| width: 100%; |
| max-width: 640px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| margin-top: 6px; |
| } |
|
|
| |
| .tv-antenna { position: relative; height: 70px; width: 160px; z-index: 1; } |
| .antenna-rod { |
| position: absolute; bottom: 8px; left: 50%; |
| width: 4px; height: 80px; |
| background: linear-gradient(180deg, #888, #555); |
| border-radius: 2px; |
| transform-origin: bottom center; |
| } |
| .left-rod { transform: rotate(-32deg); } |
| .right-rod { transform: rotate(26deg); } |
| .antenna-base { |
| position: absolute; bottom: 0; left: 50%; |
| transform: translateX(-50%); |
| width: 44px; height: 16px; |
| background: var(--wood-dark); |
| border-radius: 8px 8px 0 0; |
| } |
|
|
| |
| .tv-cabinet { |
| width: 100%; |
| display: grid; |
| grid-template-columns: 1fr 110px; |
| gap: 12px; |
| background: |
| repeating-linear-gradient(95deg, |
| var(--wood) 0 14px, var(--wood-light) 14px 16px, var(--wood) 16px 38px), |
| var(--wood); |
| border: 6px solid var(--wood-dark); |
| border-radius: 26px; |
| padding: 22px; |
| box-shadow: |
| inset 0 2px 8px rgba(255,255,255,0.15), |
| inset 0 -6px 14px rgba(0,0,0,0.4), |
| 0 18px 44px rgba(0,0,0,0.6); |
| } |
|
|
| |
| .tv-screen-frame { |
| position: relative; |
| background: #1a1410; |
| border-radius: 18px; |
| padding: 12px; |
| box-shadow: inset 0 0 18px rgba(0,0,0,0.9); |
| } |
| .tv-screen { |
| position: relative; |
| aspect-ratio: 4 / 3; |
| background: #050505; |
| border-radius: 14px / 18px; |
| overflow: hidden; |
| box-shadow: inset 0 0 40px rgba(0,0,0,0.85); |
| } |
| .tv-screen iframe { |
| width: 100%; height: 100%; |
| border: 0; display: block; |
| } |
|
|
| |
| .tv-static { position: absolute; inset: 0; z-index: 2; } |
| .tv-static.off { display: none; } |
| .tv-noise { |
| position: absolute; inset: 0; |
| background-image: |
| repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,0.06) 0 1px, transparent 1px 4px), |
| repeating-conic-gradient(rgba(255,255,255,0.04) 0% 0.5%, transparent 0.5% 1%); |
| background-color: #111; |
| animation: noise 0.18s steps(3) infinite; |
| } |
| @keyframes noise { |
| 0% { background-position: 0 0, 0 0; } |
| 50% { background-position: 13px 7px, -5px 9px; } |
| 100% { background-position: -7px -11px, 8px -4px; } |
| } |
| .tv-standby-text { |
| position: absolute; top: 8px; left: 0; right: 0; |
| text-align: center; |
| font-family: "Courier New", monospace; |
| font-size: 0.85rem; |
| letter-spacing: 3px; |
| color: #6fdc8c; |
| text-shadow: 0 0 10px rgba(111, 220, 140, 0.8); |
| } |
|
|
| .tv-log { |
| position: absolute; |
| top: 34px; bottom: 10px; left: 14px; right: 14px; |
| font-family: "Courier New", monospace; |
| font-size: 0.7rem; |
| line-height: 1.55; |
| color: #5fcf80; |
| text-shadow: 0 0 6px rgba(95, 207, 128, 0.7); |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| } |
| .tv-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| .tv-log div:last-child::after { |
| content: "▌"; |
| animation: cursor-blink 0.9s steps(1) infinite; |
| } |
| @keyframes cursor-blink { 50% { opacity: 0; } } |
|
|
| |
| .tv-scanlines { |
| position: absolute; inset: 12px; |
| border-radius: 14px / 18px; |
| pointer-events: none; |
| z-index: 3; |
| background: |
| repeating-linear-gradient(0deg, |
| rgba(0,0,0,0.16) 0 1px, transparent 1px 3px); |
| box-shadow: inset 0 0 60px rgba(20, 40, 90, 0.25); |
| } |
|
|
| |
| .tv-side { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 14px; |
| padding-top: 6px; |
| } |
| .tv-brand { |
| font-family: Georgia, serif; |
| font-size: 0.72rem; |
| letter-spacing: 2px; |
| color: #e8d9a0; |
| text-shadow: 0 1px 2px rgba(0,0,0,0.7); |
| } |
| .tv-knob { |
| width: 44px; height: 44px; |
| border-radius: 50%; |
| background: radial-gradient(circle at 35% 30%, #d8cfc0, #7a7064 60%, #4c443a); |
| box-shadow: 0 3px 6px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.4); |
| position: relative; |
| cursor: pointer; |
| transition: transform 0.3s; |
| } |
| .tv-knob:hover { transform: rotate(40deg); } |
| .knob-marker { |
| position: absolute; top: 4px; left: 50%; |
| transform: translateX(-50%); |
| width: 3px; height: 12px; |
| background: #2b241c; |
| border-radius: 2px; |
| } |
| .tv-speaker { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 5px; |
| width: 60px; |
| } |
| .tv-speaker i { |
| height: 5px; |
| background: rgba(0,0,0,0.45); |
| border-radius: 3px; |
| box-shadow: inset 0 1px 1px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.12); |
| } |
| .tv-led { |
| width: 10px; height: 10px; |
| border-radius: 50%; |
| background: #5a1010; |
| box-shadow: inset 0 1px 2px rgba(0,0,0,0.6); |
| } |
| .tv-led.on { |
| background: #ff4040; |
| box-shadow: 0 0 10px rgba(255, 64, 64, 0.9); |
| } |
|
|
| |
| .tv-legs { |
| display: flex; |
| justify-content: space-between; |
| width: 70%; |
| } |
| .tv-leg { |
| width: 16px; height: 46px; |
| background: linear-gradient(180deg, var(--wood-dark), #2e1a0c); |
| border-radius: 0 0 6px 6px; |
| transform: skewX(0deg); |
| } |
| .tv-legs .tv-leg:first-child { transform: rotate(7deg); } |
| .tv-legs .tv-leg:last-child { transform: rotate(-7deg); } |
|
|
| footer { |
| text-align: center; |
| color: var(--muted); |
| font-size: 0.78rem; |
| padding: 14px; |
| } |
| .disclaimer { |
| max-width: 920px; |
| margin: 10px auto 0; |
| font-size: 0.64rem; |
| line-height: 1.5; |
| color: #6a6080; |
| text-align: justify; |
| } |
|
|
