diff --git a/index.html b/index.html index 45d3cc0..558a11b 100644 --- a/index.html +++ b/index.html @@ -6,19 +6,33 @@ Simple Table - + -
- -
-
- -
- +
+ +
+
+ +
+
diff --git a/package.json b/package.json index 8bb7889..3804a8b 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "prettier": "./.prettierrc.json", "devDependencies": { "@playwright/test": "^1.60.0", - "@screenly/edge-apps": "^1.2.1", + "@screenly/edge-apps": "^1.3.0", "@types/bun": "^1.3.14", "@types/jsdom": "^28.0.3", "@types/papaparse": "^5.5.2", diff --git a/screenshots/1080x1920.webp b/screenshots/1080x1920.webp index ec73ab8..cfa27ff 100644 Binary files a/screenshots/1080x1920.webp and b/screenshots/1080x1920.webp differ diff --git a/screenshots/1280x720.webp b/screenshots/1280x720.webp index 292a823..cba7f95 100644 Binary files a/screenshots/1280x720.webp and b/screenshots/1280x720.webp differ diff --git a/screenshots/1920x1080.webp b/screenshots/1920x1080.webp index 61c48e2..52f2cab 100644 Binary files a/screenshots/1920x1080.webp and b/screenshots/1920x1080.webp differ diff --git a/screenshots/2160x3840.webp b/screenshots/2160x3840.webp index 7af85e5..1a57d15 100644 Binary files a/screenshots/2160x3840.webp and b/screenshots/2160x3840.webp differ diff --git a/screenshots/2160x4096.webp b/screenshots/2160x4096.webp index 8bf135c..051a601 100644 Binary files a/screenshots/2160x4096.webp and b/screenshots/2160x4096.webp differ diff --git a/screenshots/3840x2160.webp b/screenshots/3840x2160.webp index 52fd498..0df5165 100644 Binary files a/screenshots/3840x2160.webp and b/screenshots/3840x2160.webp differ diff --git a/screenshots/4096x2160.webp b/screenshots/4096x2160.webp index f4853c9..2e11761 100644 Binary files a/screenshots/4096x2160.webp and b/screenshots/4096x2160.webp differ diff --git a/screenshots/480x800.webp b/screenshots/480x800.webp index e149f95..a783c8e 100644 Binary files a/screenshots/480x800.webp and b/screenshots/480x800.webp differ diff --git a/screenshots/720x1280.webp b/screenshots/720x1280.webp index f09a026..91c2c18 100644 Binary files a/screenshots/720x1280.webp and b/screenshots/720x1280.webp differ diff --git a/screenshots/800x480.webp b/screenshots/800x480.webp index f177cc1..ab77713 100644 Binary files a/screenshots/800x480.webp and b/screenshots/800x480.webp differ diff --git a/src/app.ts b/src/app.ts index 1514a9d..4bd666f 100644 --- a/src/app.ts +++ b/src/app.ts @@ -5,6 +5,12 @@ import { } from '@screenly/edge-apps' import Papa from 'papaparse' +const ROW_DIVIDER_CLASSES = + 'bg-[linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15))] [background-size:calc(100%-4rem)_1px] bg-bottom bg-no-repeat' + +const CELL_PADDING_CLASSES = + 'whitespace-nowrap portrait:px-5 [@media_(max-width:1280px)_and_(orientation:landscape)]:px-6' + export function parseCSV(csv: string): string[][] { const result = Papa.parse(csv.trim(), { skipEmptyLines: true, @@ -34,8 +40,10 @@ export function renderTable(csv: string): void { const [headers, ...dataRows] = rows const headerRow = document.createElement('tr') + headerRow.className = ROW_DIVIDER_CLASSES headers.forEach((header) => { const th = document.createElement('th') + th.className = `px-8 py-5 text-left text-xs font-semibold tracking-[0.08em] uppercase text-[#9d9d9f] ${CELL_PADDING_CLASSES} portrait:py-4 portrait:text-[0.7rem] [@media_(max-width:1280px)_and_(orientation:landscape)]:py-4` th.textContent = header headerRow.appendChild(th) }) @@ -43,8 +51,10 @@ export function renderTable(csv: string): void { dataRows.forEach((row) => { const tr = document.createElement('tr') + tr.className = `${ROW_DIVIDER_CLASSES} last:bg-none` row.forEach((cell) => { const td = document.createElement('td') + td.className = `px-8 py-[1.125rem] text-lg font-normal text-[#dadadb] ${CELL_PADDING_CLASSES} portrait:py-[0.875rem] portrait:text-base [@media_(max-width:1280px)_and_(orientation:landscape)]:py-[0.875rem] [@media_(max-width:1280px)_and_(orientation:landscape)]:text-base` td.textContent = cell tr.appendChild(td) }) diff --git a/src/css/style.css b/src/css/style.css index daff14c..ea94d3b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,180 +1,10 @@ -@import '@screenly/edge-apps/styles'; - -:root { - --color-surface-low: #08080d; - --color-surface-mid: #050508; - --color-surface-high: #030304; - --color-text-primary: #f2f2f3; - --color-text-secondary: #dadadb; - --color-text-muted: #9d9d9f; - --color-border-subtle: #212126; - --color-border-strong: #494949; - --color-accent-default: #0066ff; - --color-info: #00a8ff; -} - -* { - box-sizing: border-box; -} - -body { - margin: 0; - padding: 0; - overflow: hidden; - color: var(--color-text-primary); - font-family: 'Inter', system-ui, sans-serif; - background: url('/static/images/bg.webp') no-repeat center center; - background-size: cover; - background-color: var(--color-surface-low); -} - -body::before { - content: ''; - position: fixed; - inset: 0; - z-index: var(--z-index-backdrop); - pointer-events: none; - background: rgba(0, 0, 0, 0.45); - backdrop-filter: blur(7px); -} - -auto-scaler { - position: relative; - z-index: var(--z-index-content); -} - -#app { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} - -.header { - flex-shrink: 0; -} - -.content { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - padding: 2rem 3rem; - min-height: 0; -} - -#table-wrapper { - width: 100%; - max-width: 100rem; - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -#table-title { - font-size: 2rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; - letter-spacing: -0.03em; - text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4); -} - -.table-card { - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 1.5rem; - overflow: hidden; - backdrop-filter: blur(20px); - box-shadow: - 0 1.25rem 3rem rgba(0, 0, 0, 0.4), - 0 0.5rem 1rem rgba(0, 0, 0, 0.2); -} - -#data-table { - width: 100%; - border-collapse: collapse; -} - -#data-table thead tr { - background-image: linear-gradient( - rgba(255, 255, 255, 0.15), - rgba(255, 255, 255, 0.15) - ); - background-size: calc(100% - 4rem) 1px; - background-position: center bottom; - background-repeat: no-repeat; -} - -#data-table th { - padding: 1.25rem 2rem; - text-align: left; - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--color-text-muted); - white-space: nowrap; -} - -#data-table td { - padding: 1.125rem 2rem; - font-size: 1.125rem; - font-weight: 400; - color: var(--color-text-secondary); - white-space: nowrap; -} - -#data-table tbody tr { - background-image: linear-gradient( - rgba(255, 255, 255, 0.15), - rgba(255, 255, 255, 0.15) - ); - background-size: calc(100% - 4rem) 1px; - background-position: center bottom; - background-repeat: no-repeat; -} - -#data-table tbody tr:last-child { - background-image: none; -} - -@media (orientation: portrait) { - .content { - padding: 1.5rem 2rem; - align-items: center; - } - - #table-wrapper { - max-width: 100%; - } - - #table-title { - font-size: 1.75rem; - } - - #data-table th { - padding: 1rem 1.25rem; - font-size: 0.7rem; - } - - #data-table td { - padding: 0.875rem 1.25rem; - font-size: 1rem; - } -} - -@media screen and (max-width: 1280px) and (orientation: landscape) { - .content { - padding: 1.5rem 2rem; - } - - #data-table th { - padding: 1rem 1.5rem; - } - - #data-table td { - padding: 0.875rem 1.5rem; - font-size: 1rem; - } -} +/* Tailwind CSS, skipping Preflight (resets border/margin/padding on every + element via a universal selector and breaks custom-element hosts like + ). @screenly/edge-apps/styles goes in the `base` layer so any + Tailwind utility classes added later always win the cascade, regardless + of selector specificity. */ +@layer theme, base, utilities; + +@import 'tailwindcss/theme.css' layer(theme); +@import '@screenly/edge-apps/styles' layer(base); +@import 'tailwindcss/utilities.css' layer(utilities);