TypeScript 55.4%
Python 43.2%
SQL 1.2%
1import type { CSSProperties } from "react";23/**4 * WebSensor brand mark: a dark rounded tile with a W-shaped pulse — grey until the detected change,5 * signal green after it, ending in the sensor reading. The same geometry is used for the favicon6 * (app/icon.svg), the nav wordmark, the OpenGraph images and the PWA icons (public/icons/*).7 */8export const BRAND = {9 bg: "#0a0e15",10 fg: "#c9d1e0",11 signal: "#22d3a5",12 line: "#2d394e",13 muted: "#a3adc2",14 subtle: "#6b7591",15} as const;1617export function Mark({ size = 20, className = "", style, title = "WebSensor" }: { size?: number; className?: string; style?: CSSProperties; title?: string }) {18 return (19 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width={size} height={size} className={className} style={style} role="img" aria-label={title}>20 <rect width="64" height="64" rx="14" fill={BRAND.bg} />21 <rect x="0.5" y="0.5" width="63" height="63" rx="13.5" fill="none" stroke={BRAND.signal} strokeOpacity="0.18" />22 <path d="M8 46H56" stroke={BRAND.line} strokeWidth="2" strokeLinecap="round" />23 <path d="M9 24L19 46L31 30L43 46" fill="none" stroke={BRAND.fg} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />24 <path d="M43 46L54 22" fill="none" stroke={BRAND.signal} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />25 <circle cx="54" cy="22" r="7" fill={BRAND.signal} fillOpacity="0.22" />26 <circle cx="54" cy="22" r="4" fill={BRAND.signal} />27 </svg>28 );29}3031/** Large decorative pulse used as the OpenGraph backdrop (no tile, stroke only). */32export function PulseBackdrop({ width, height, opacity = 0.16 }: { width: number; height: number; opacity?: number }) {33 const y0 = height * 0.72;34 const d = `M-20 ${y0} H${width * 0.28} L${width * 0.36} ${y0 - height * 0.42} L${width * 0.47} ${y0 + height * 0.06} L${width * 0.56} ${y0 - height * 0.18} L${width * 0.63} ${y0} H${width * 0.74} L${width * 0.8} ${y0 - height * 0.62} L${width * 0.86} ${y0} H${width + 20}`;35 return (36 <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ position: "absolute", top: 0, left: 0 }}>37 <path d={d} fill="none" stroke={BRAND.signal} strokeWidth={6} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={opacity} />38 <circle cx={width * 0.8} cy={y0 - height * 0.62} r={22} fill={BRAND.signal} fillOpacity={opacity * 0.6} />39 <circle cx={width * 0.8} cy={y0 - height * 0.62} r={11} fill={BRAND.signal} fillOpacity={opacity * 1.6} />40 </svg>41 );42}43