From ca122ad723ea44502052ddb60d4e4939fb5d8397 Mon Sep 17 00:00:00 2001 From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com> Date: Tue, 6 Oct 2026 09:11:36 +0200 Subject: [PATCH] Add /set: on-set screen tracking markers for crews - Unlinked, noindex page listing marker PNGs from public/set/markers (discovered at build time; filenames encode device/resolution/orientation) - Detects the current screen and offers the closest match first - One-tap full-screen viewer: wake lock, hidden controls, full grid/edges toggle, fill vs fit by aspect, back button closes, deep links via hash - Offline service worker + home-screen manifest for iPhone full screen - Marketing chrome moved into an (site) route group so /set has none Co-Authored-By: Claude Opus 5.5 --- .gitignore | 3 + README.md | 18 + app/(site)/layout.tsx | 13 + app/{ => (site)}/page.tsx | 0 app/{ => (site)}/work/[slug]/page.tsx | 0 app/{ => (site)}/work/page.tsx | 0 app/layout.tsx | 8 +- app/not-found.tsx | 32 +- app/set/page.tsx | 27 ++ components/set/MarkerPicker.tsx | 445 ++++++++++++++++++ docker/nginx.conf | 10 + lib/markers.ts | 85 ++++ public/set/manifest.webmanifest | 14 + .../markers/edge-markers_laptop_1920x1080.png | Bin 0 -> 28246 bytes ...e-markers_laptop_MacBook-Pro_3024x1964.png | Bin 0 -> 37564 bytes .../edge-markers_laptop_MacBook_2560x1600.png | Bin 0 -> 28887 bytes .../edge-markers_monitor_4K_3840x2160.png | Bin 0 -> 58479 bytes .../edge-markers_phone_Android_1080x2400.png | Bin 0 -> 30384 bytes ...kers_phone_Android_2400x1080_landscape.png | Bin 0 -> 30341 bytes ...-markers_phone_iPhone-ProMax_1290x2796.png | Bin 0 -> 34605 bytes ...hone_iPhone-ProMax_2796x1290_landscape.png | Bin 0 -> 32063 bytes ...dge-markers_phone_iPhone-Pro_1179x2556.png | Bin 0 -> 44305 bytes ...s_phone_iPhone-Pro_2556x1179_landscape.png | Bin 0 -> 35066 bytes .../edge-markers_phone_iPhone_1170x2532.png | Bin 0 -> 32983 bytes ...rkers_phone_iPhone_2532x1170_landscape.png | Bin 0 -> 35119 bytes ...markers_tablet_iPad-Pro-12.9_2048x2732.png | Bin 0 -> 56127 bytes .../edge-markers_tablet_iPad_1640x2360.png | Bin 0 -> 46466 bytes .../set/markers/markers_laptop_1920x1080.png | Bin 0 -> 41805 bytes .../markers_laptop_MacBook-Pro_3024x1964.png | Bin 0 -> 41605 bytes .../markers_laptop_MacBook_2560x1600.png | Bin 0 -> 32525 bytes .../markers/markers_monitor_4K_3840x2160.png | Bin 0 -> 86721 bytes .../markers_phone_Android_1080x2400.png | Bin 0 -> 33413 bytes ...kers_phone_Android_2400x1080_landscape.png | Bin 0 -> 45201 bytes .../markers_phone_iPhone-ProMax_1290x2796.png | Bin 0 -> 38306 bytes ...hone_iPhone-ProMax_2796x1290_landscape.png | Bin 0 -> 51055 bytes .../markers_phone_iPhone-Pro_1179x2556.png | Bin 0 -> 48111 bytes ...s_phone_iPhone-Pro_2556x1179_landscape.png | Bin 0 -> 54250 bytes .../markers_phone_iPhone_1170x2532.png | Bin 0 -> 36520 bytes ...rkers_phone_iPhone_2532x1170_landscape.png | Bin 0 -> 54670 bytes ...markers_tablet_iPad-Pro-12.9_2048x2732.png | Bin 0 -> 67187 bytes .../markers/markers_tablet_iPad_1640x2360.png | Bin 0 -> 57138 bytes public/set/markers/plain_grey_128.png | Bin 0 -> 52095 bytes public/set/sw.js | 54 +++ 43 files changed, 692 insertions(+), 17 deletions(-) create mode 100644 app/(site)/layout.tsx rename app/{ => (site)}/page.tsx (100%) rename app/{ => (site)}/work/[slug]/page.tsx (100%) rename app/{ => (site)}/work/page.tsx (100%) create mode 100644 app/set/page.tsx create mode 100644 components/set/MarkerPicker.tsx create mode 100644 lib/markers.ts create mode 100644 public/set/manifest.webmanifest create mode 100644 public/set/markers/edge-markers_laptop_1920x1080.png create mode 100644 public/set/markers/edge-markers_laptop_MacBook-Pro_3024x1964.png create mode 100644 public/set/markers/edge-markers_laptop_MacBook_2560x1600.png create mode 100644 public/set/markers/edge-markers_monitor_4K_3840x2160.png create mode 100644 public/set/markers/edge-markers_phone_Android_1080x2400.png create mode 100644 public/set/markers/edge-markers_phone_Android_2400x1080_landscape.png create mode 100644 public/set/markers/edge-markers_phone_iPhone-ProMax_1290x2796.png create mode 100644 public/set/markers/edge-markers_phone_iPhone-ProMax_2796x1290_landscape.png create mode 100644 public/set/markers/edge-markers_phone_iPhone-Pro_1179x2556.png create mode 100644 public/set/markers/edge-markers_phone_iPhone-Pro_2556x1179_landscape.png create mode 100644 public/set/markers/edge-markers_phone_iPhone_1170x2532.png create mode 100644 public/set/markers/edge-markers_phone_iPhone_2532x1170_landscape.png create mode 100644 public/set/markers/edge-markers_tablet_iPad-Pro-12.9_2048x2732.png create mode 100644 public/set/markers/edge-markers_tablet_iPad_1640x2360.png create mode 100644 public/set/markers/markers_laptop_1920x1080.png create mode 100644 public/set/markers/markers_laptop_MacBook-Pro_3024x1964.png create mode 100644 public/set/markers/markers_laptop_MacBook_2560x1600.png create mode 100644 public/set/markers/markers_monitor_4K_3840x2160.png create mode 100644 public/set/markers/markers_phone_Android_1080x2400.png create mode 100644 public/set/markers/markers_phone_Android_2400x1080_landscape.png create mode 100644 public/set/markers/markers_phone_iPhone-ProMax_1290x2796.png create mode 100644 public/set/markers/markers_phone_iPhone-ProMax_2796x1290_landscape.png create mode 100644 public/set/markers/markers_phone_iPhone-Pro_1179x2556.png create mode 100644 public/set/markers/markers_phone_iPhone-Pro_2556x1179_landscape.png create mode 100644 public/set/markers/markers_phone_iPhone_1170x2532.png create mode 100644 public/set/markers/markers_phone_iPhone_2532x1170_landscape.png create mode 100644 public/set/markers/markers_tablet_iPad-Pro-12.9_2048x2732.png create mode 100644 public/set/markers/markers_tablet_iPad_1640x2360.png create mode 100644 public/set/markers/plain_grey_128.png create mode 100644 public/set/sw.js diff --git a/.gitignore b/.gitignore index e46600e..ae17148 100644 --- a/.gitignore +++ b/.gitignore @@ -43,3 +43,6 @@ next-env.d.ts # source media (web versions live in public/) content/*.mp4 content/*.pdf + +# source copies of screen markers (served from public/set/markers) +content/screen_markers/ diff --git a/README.md b/README.md index 8c9fdec..f36becb 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,24 @@ All copy (studio info, services, projects, contact email) lives in - **Logo:** the fox mark is a vector in `components/Fox.tsx` / `public/fox.svg`, traced from `G:\_ADMIN\TWOTALESLOGO.png`. Favicons are `app/icon.png` and `app/apple-icon.png`. +## On-set screen markers (`/set`) + +`twotalesvfx.com/set` is a tool page for production crews (not linked from the site, +not indexed). It lists screen-tracking marker images, highlights the one matching the +device it's opened on, and shows it full-screen in one tap. It works offline after the +first visit. + +To add a device, drop PNGs into `public/set/markers/` named like: + +``` +markers_phone_iPhone-Pro_1179x2556.png # full dot grid +edge-markers_phone_iPhone-Pro_2556x1179_landscape.png # edges only +markers_laptop_1920x1080.png # name is optional +``` + +Kinds: `phone`, `tablet`, `laptop`, `monitor`. Any other PNG shows under "Other". +Bump `CACHE` in `public/set/sw.js` when replacing an existing image so phones fetch the new one. + ## Structure ``` diff --git a/app/(site)/layout.tsx b/app/(site)/layout.tsx new file mode 100644 index 0000000..ab84dca --- /dev/null +++ b/app/(site)/layout.tsx @@ -0,0 +1,13 @@ +import Footer from "@/components/Footer"; +import Header from "@/components/Header"; + +// Marketing pages: header, footer and film grain. Tools like /set live outside this group. +export default function SiteLayout({ children }: { children: React.ReactNode }) { + return ( +
+
+
{children}
+
+
+ ); +} diff --git a/app/page.tsx b/app/(site)/page.tsx similarity index 100% rename from app/page.tsx rename to app/(site)/page.tsx diff --git a/app/work/[slug]/page.tsx b/app/(site)/work/[slug]/page.tsx similarity index 100% rename from app/work/[slug]/page.tsx rename to app/(site)/work/[slug]/page.tsx diff --git a/app/work/page.tsx b/app/(site)/work/page.tsx similarity index 100% rename from app/work/page.tsx rename to app/(site)/work/page.tsx diff --git a/app/layout.tsx b/app/layout.tsx index d3f46c8..daabcff 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,5 @@ import type { Metadata, Viewport } from "next"; import { Geist, Geist_Mono, Josefin_Sans } from "next/font/google"; -import Header from "@/components/Header"; -import Footer from "@/components/Footer"; import { site } from "@/content/site"; import "./globals.css"; @@ -40,11 +38,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) { lang="en" className={`${geistSans.variable} ${geistMono.variable} ${josefin.variable} antialiased`} > - -
-
{children}
-