sync

design-reference/app/chatgpt-auth.ts

@@ -0,0 +1,86 @@
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+export type ChatGPTUser = {
+  displayName: string;
+  email: string;
+  fullName: string | null;
+};
+
+const USER_EMAIL_HEADER = "oai-authenticated-user-email";
+const USER_FULL_NAME_HEADER = "oai-authenticated-user-full-name";
+const USER_FULL_NAME_ENCODING_HEADER =
+  "oai-authenticated-user-full-name-encoding";
+const PERCENT_ENCODED_UTF8 = "percent-encoded-utf-8";
+const SIGN_IN_PATH = "/signin-with-chatgpt";
+const SIGN_OUT_PATH = "/signout-with-chatgpt";
+const CALLBACK_PATH = "/callback";
+
+export async function getChatGPTUser(): Promise<ChatGPTUser | null> {
+  const requestHeaders = await headers();
+  const email = requestHeaders.get(USER_EMAIL_HEADER);
+  if (!email) return null;
+
+  const encodedFullName = requestHeaders.get(USER_FULL_NAME_HEADER);
+  const fullName =
+    encodedFullName &&
+    requestHeaders.get(USER_FULL_NAME_ENCODING_HEADER) === PERCENT_ENCODED_UTF8
+      ? safeDecodeURIComponent(encodedFullName)
+      : null;
+
+  return {
+    displayName: fullName ?? email,
+    email,
+    fullName,
+  };
+}
+
+export async function requireChatGPTUser(
+  returnTo: string,
+): Promise<ChatGPTUser> {
+  const user = await getChatGPTUser();
+  if (user) return user;
+
+  redirect(chatGPTSignInPath(returnTo));
+}
+
+export function chatGPTSignInPath(returnTo: string): string {
+  const safeReturnTo = safeRelativeReturnPath(returnTo);
+  return `${SIGN_IN_PATH}?return_to=${encodeURIComponent(safeReturnTo)}`;
+}
+
+export function chatGPTSignOutPath(returnTo = "/"): string {
+  const safeReturnTo = safeRelativeReturnPath(returnTo);
+  return `${SIGN_OUT_PATH}?return_to=${encodeURIComponent(safeReturnTo)}`;
+}
+
+function safeRelativeReturnPath(value: string): string {
+  if (!value.startsWith("/") || value.startsWith("//")) return "/";
+
+  let url: URL;
+  try {
+    url = new URL(value, "https://app.local");
+  } catch {
+    return "/";
+  }
+  if (url.origin !== "https://app.local") return "/";
+  if (isReservedAuthPath(url.pathname)) return "/";
+
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+function isReservedAuthPath(pathname: string): boolean {
+  return (
+    pathname === SIGN_IN_PATH ||
+    pathname === SIGN_OUT_PATH ||
+    pathname === CALLBACK_PATH
+  );
+}
+
+function safeDecodeURIComponent(value: string): string | null {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return null;
+  }
+}

design-reference/app/globals.css

@@ -0,0 +1,211 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../vendor/shadcn-tailwind-4.13.0.css";
+
+:root {
+  --background: #f2f5ee; --foreground: #092226; --card: #fff; --card-foreground: #092226;
+  --popover: #fff; --popover-foreground: #092226; --primary: #12383b; --primary-foreground: #f7f9f3;
+  --secondary: #dce6db; --secondary-foreground: #092226; --muted: #e7ece4; --muted-foreground: #647472;
+  --accent: #c9f45b; --accent-foreground: #092226; --destructive: #c94634; --border: #cbd6ce;
+  --input: #becbc4; --ring: #87a436; --radius: .8rem; --lime: #c9f45b; --deep: #082226;
+  --teal: #12383b; --paper: #f2f5ee; --orange: #ffb65c;
+}
+@theme inline {
+  --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive);
+  --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 6px);
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; background: var(--paper); color: var(--foreground); font-family: Inter, ui-sans-serif, system-ui, sans-serif; min-width: 320px; }
+button, input, textarea { font: inherit; } button { cursor: pointer; }
+.site-shell { min-height: 100vh; display: block !important; }
+.content-grid { width: min(1360px, calc(100% - 64px)); margin-inline: auto; }
+
+.topbar { height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; width: min(1480px, calc(100% - 48px)); margin: auto; }
+.brand { display: flex; align-items: center; gap: 12px; min-width: max-content; }
+.brand-mark { width: 42px; height: 42px; border: 1px solid #9eb0a7; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--lime); }
+.brand-mark svg { width: 23px; height: 23px; }
+.brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: .95; display: flex; flex-direction: column; letter-spacing: -.02em; }
+.brand-name strong { font-size: 20px; font-style: italic; }
+.main-nav { align-self: center; height: 44px !important; gap: 22px !important; }
+.main-nav button { font-size: 14px; padding-inline: 8px; height: 41px; color: #526461; }
+.main-nav button[data-state="active"] { color: var(--deep); }
+.main-nav button[data-state="active"]::after { background: var(--deep); height: 3px; border-radius: 3px; }
+.live-badge { justify-self: end; display: flex; align-items: center; gap: 9px; color: #60716e; font-size: 13px; }
+.live-badge span { width: 8px; height: 8px; border-radius: 50%; background: #83b83a; box-shadow: 0 0 0 5px #83b83a20; }
+
+.intro { padding: 74px 0 42px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: end; gap: 70px; }
+.eyebrow, .overline { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 750; color: #657673; }
+.eyebrow { display: flex; align-items: center; gap: 10px; }
+.eyebrow > span { display: grid; place-items: center; min-width: 41px; height: 25px; padding: 0 8px; border: 1px solid #9aaa9f; border-radius: 20px; color: var(--deep); letter-spacing: .05em; }
+.intro h1, .subpage-title h1, .submit-intro h1 { margin: 18px 0 22px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(58px, 6.3vw, 102px); line-height: .87; letter-spacing: -.065em; }
+h1 em, h2 em { color: #497074; font-weight: 400; }
+.intro-copy > p { font-size: 18px; line-height: 1.55; color: #586a68; max-width: 560px; }
+.lake-card { position: relative; border-radius: 18px; overflow: hidden; height: 326px; box-shadow: 0 24px 70px #173c3f24; }
+.lake-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.lake-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, #041c20d9); }
+.lake-overlay { position: absolute; z-index: 2; inset: auto 24px 22px 26px; display: flex; justify-content: space-between; align-items: end; color: #fff; }
+.lake-overlay .overline { color: #d2dedb; display: block; margin-bottom: 7px; }
+.lake-overlay strong { font-family: Georgia, serif; font-size: 21px; font-weight: 400; }
+.pulse-orb { width: 45px; height: 45px; border: 1px solid #ffffff7d; border-radius: 50%; display: grid; place-items: center; }
+.pulse-orb span { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 8px #c9f45b25; }
+
+.filters-wrap { background: var(--deep); padding: 24px 0; position: sticky; top: 0; z-index: 20; box-shadow: 0 10px 35px #08222620; }
+.filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
+.filter-field { display: flex; flex-direction: column; gap: 7px; color: #9fb0ad; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
+.filter-field [data-slot="select-trigger"] { width: 100%; height: 48px; background: #ffffff0c; color: #f5f8f3; border-color: #ffffff29; border-radius: 10px; font-size: 15px; text-transform: none; letter-spacing: normal; box-shadow: none; }
+.filter-field [data-slot="select-trigger"] svg { color: #b5c1be; }
+.search-button, .submit-button { height: 48px; border-radius: 10px; padding-inline: 24px; background: var(--lime); color: var(--deep); font-weight: 750; }
+.search-button:hover, .submit-button:hover { background: #dcff85; }
+
+.dashboard { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .75fr); gap: 26px; padding: 66px 0 104px; align-items: start; }
+.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 23px; }
+.section-heading h2, .detail-head h2, .how-it-works h2 { font-family: Georgia, serif; font-size: 38px; font-weight: 400; margin: 6px 0 0; letter-spacing: -.04em; }
+.result-count { border: 1px solid #b9c6bf; color: #667875; font-size: 13px; padding: 7px 11px; border-radius: 20px; }
+.spot-list { display: flex; flex-direction: column; gap: 12px; }
+.spot-card { width: 100%; position: relative; display: grid; grid-template-columns: 45px 1fr 156px; gap: 18px; padding: 22px 52px 22px 20px; text-align: left; border: 1px solid #d5ded7; border-radius: 16px; background: #fbfcf9; color: var(--deep); transition: .22s ease; }
+.spot-card:hover, .spot-card.selected { transform: translateY(-2px); border-color: #7d9488; box-shadow: 0 18px 40px #14333812; }
+.spot-card.selected { background: #fff; }
+.spot-rank { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #cad4cd; font-family: Georgia, serif; font-style: italic; color: #788985; }
+.spot-topline { display: flex; align-items: center; gap: 12px; color: #687a77; font-size: 13px; }
+.activity-pill { display: inline-flex; align-items: center; gap: 6px; background: #e8efe3; color: #4b672c; padding: 5px 9px; border-radius: 30px; font-size: 11px; font-weight: 750; }
+.activity-pill i { width: 6px; height: 6px; border-radius: 50%; background: #6d9f32; }
+.activity-pill.level-4 { color: #426315; background: #e6f7c3; }
+.spot-main h3 { font-family: Georgia, serif; font-size: 25px; font-weight: 400; margin: 8px 0; }
+.spot-meta { display: flex; gap: 16px; color: #71817f; font-size: 13px; }
+.spot-meta span { display: flex; align-items: center; gap: 5px; } .spot-meta svg { width: 14px; }
+.bait-line { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding-top: 15px; border-top: 1px solid #e2e8e2; }
+.bait-line > svg { width: 20px; color: #759630; }
+.bait-line div { display: flex; flex-direction: column; gap: 2px; }
+.bait-line span { color: #82908e; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
+.bait-line strong { font-size: 14px; }
+.spot-stats { border-left: 1px solid #e2e8e2; padding-left: 18px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 10px; }
+.spot-stats > div { display: flex; flex-direction: column; }
+.spot-stats strong { font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
+.spot-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7c8d89; }
+.sparkline { grid-column: 1 / -1; width: 100%; height: 44px; overflow: visible; }
+.spark-area { fill: #c9f45b38; stroke: none; } .spark-line { fill: none; stroke: #6c8d28; stroke-width: 2; vector-effect: non-scaling-stroke; }
+.card-arrow { position: absolute; right: 18px; top: 50%; width: 20px; transform: translateY(-50%); color: #91a09c; }
+.empty-state { min-height: 300px; display: grid; place-items: center; align-content: center; text-align: center; color: #71817f; border: 1px dashed #b9c7bf; border-radius: 16px; }
+.empty-state svg { width: 32px; height: 32px; } .empty-state h3 { margin: 14px 0 0; color: var(--deep); } .empty-state p { margin: 6px 0; }
+
+.detail-card { position: sticky; top: 124px; background: var(--deep); color: #f5f8f3; border-radius: 18px; padding: 27px; overflow: hidden; }
+.detail-card::before { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid #ffffff0f; border-radius: 50%; left: 48%; top: -210px; box-shadow: 0 0 0 48px #ffffff08, 0 0 0 96px #ffffff05; }
+.detail-card > * { position: relative; z-index: 1; }
+.detail-head { display: flex; justify-content: space-between; gap: 20px; }
+.detail-head .overline, .detail-section .overline { color: #a7b6b3; }
+.detail-head h2 { font-size: 30px; } .detail-head h2 em { color: var(--lime); font-size: 22px; margin-left: 5px; }
+.icon-button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff34; background: transparent; color: #fff; display: grid; place-items: center; }
+.icon-button svg { width: 18px; }
+.detail-score { display: grid; grid-template-columns: 126px 1fr; gap: 20px; align-items: center; padding: 34px 0 29px; }
+.score-ring { width: 122px; height: 122px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) var(--score), #ffffff16 0); position: relative; }
+.score-ring::after { content: ""; position: absolute; inset: 8px; background: var(--deep); border-radius: 50%; }
+.score-ring > div { z-index: 1; text-align: center; display: flex; flex-direction: column; }
+.score-ring strong { font-family: Georgia, serif; font-size: 39px; font-weight: 400; line-height: 1; }
+.score-ring span { color: #a9b8b5; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
+.detail-score > div > span { color: #a9b8b5; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
+.detail-score > div > strong { display: block; margin: 5px 0 8px; font-family: Georgia, serif; font-size: 24px; font-weight: 400; color: var(--lime); }
+.detail-score p { color: #b7c3c0; font-size: 13px; line-height: 1.5; margin: 0; }
+.metric-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #ffffff1c; border-radius: 12px; overflow: hidden; }
+.metric-grid > div { min-height: 91px; padding: 16px; display: grid; grid-template-columns: 23px 1fr; border-bottom: 1px solid #ffffff1c; gap: 3px 8px; }
+.metric-grid > div:nth-child(odd) { border-right: 1px solid #ffffff1c; } .metric-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
+.metric-grid svg { width: 18px; color: var(--lime); grid-row: 1 / 3; }
+.metric-grid span { color: #9cadaa; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
+.metric-grid strong { font-family: Georgia, serif; font-size: 19px; font-weight: 400; }
+.detail-section { margin-top: 28px; }
+.lure-chip { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid #ffffff17; }
+.lure-dot { width: 12px; height: 28px; border-radius: 50% 50% 43% 43%; background: var(--orange); transform: rotate(22deg); box-shadow: inset -4px 0 #091e2250; }
+.lure-dot.secondary { background: #7cbaa2; } .lure-chip > div:nth-child(2) { display: flex; flex-direction: column; }
+.lure-chip strong { font-size: 13px; } .lure-chip span { color: #9fb0ad; font-size: 12px; } .lure-chip > span { color: var(--lime); }
+.confidence-note { display: flex; gap: 10px; padding: 16px; background: #ffffff0a; border-radius: 10px; margin-top: 22px; font-size: 12px; line-height: 1.45; color: #aebcba; }
+.confidence-note svg { width: 19px; flex: 0 0 auto; color: var(--lime); } .confidence-note strong { color: #f6f8f3; }
+
+.how-it-works { border-top: 1px solid #cfd8d1; padding: 85px 0 105px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
+.how-it-works h2 { font-size: 47px; line-height: 1.05; }
+.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+.principles article { padding: 24px 0 0; border-top: 2px solid #294b4e; }
+.principles article > span { font-family: Georgia, serif; color: #82928f; font-style: italic; }
+.principles h3 { margin: 28px 0 8px; font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
+.principles p { font-size: 14px; line-height: 1.55; color: #657572; }
+
+.subpage { padding-top: 86px; padding-bottom: 120px; min-height: calc(100vh - 190px); }
+.subpage-title { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; margin-bottom: 54px; }
+.subpage-title h1 { font-size: clamp(58px, 7vw, 108px); margin-bottom: 0; }
+.subpage-title p { color: #627370; line-height: 1.65; font-size: 17px; max-width: 500px; }
+.record-toolbar { min-height: 100px; background: var(--deep); color: #fff; border-radius: 16px 16px 0 0; padding: 20px 25px; display: flex; align-items: center; gap: 38px; }
+.record-stat { display: flex; align-items: center; gap: 12px; } .record-stat > svg { color: var(--lime); width: 22px; }
+.record-stat div { display: flex; flex-direction: column; } .record-stat strong { font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
+.record-stat span, .source-label { color: #aab9b6; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
+.source-label { margin-left: auto; }
+.records-table-wrap { background: #fff; border-radius: 0 0 16px 16px; overflow: hidden; }
+.records-table { width: 100%; border-collapse: collapse; }
+.records-table th { text-align: left; padding: 17px 20px; background: #e4ebe3; color: #647572; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
+.records-table td { padding: 21px 20px; border-top: 1px solid #e3e9e3; font-size: 14px; }
+.records-table td:first-child { font-family: Georgia, serif; font-size: 17px; display: flex; align-items: center; gap: 9px; }
+.records-table td:first-child svg { width: 18px; color: #6a892d; } .records-table td:nth-child(2) { color: #537014; font-weight: 750; }
+
+.submit-page { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; align-items: start; }
+.submit-intro { position: sticky; top: 120px; } .submit-intro h1 { font-size: clamp(58px, 6.5vw, 96px); }
+.submit-intro > p { max-width: 460px; color: #61726f; line-height: 1.6; font-size: 17px; }
+.submit-tip { display: flex; gap: 15px; margin-top: 48px; max-width: 430px; border-top: 1px solid #b9c7bf; padding-top: 22px; }
+.submit-tip > svg { color: #6e8e2b; width: 23px; flex: none; } .submit-tip div { display: flex; flex-direction: column; gap: 5px; }
+.submit-tip span { color: #6a7977; font-size: 13px; line-height: 1.45; }
+.catch-form { background: #fff; border: 1px solid #d4ddd6; border-radius: 18px; padding: 34px; box-shadow: 0 30px 80px #16383c12; min-height: 580px; }
+.form-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid #dfe6df; margin-bottom: 26px; }
+.form-heading > span { font-family: Georgia, serif; font-size: 27px; } .form-heading small { color: #7b8986; }
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
+.form-grid label { display: flex; flex-direction: column; gap: 7px; color: #60716e; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
+.form-grid label.wide { grid-column: 1 / -1; }
+.form-grid input, .form-grid textarea { width: 100%; background: #f3f6f1; border: 1px solid #d6dfd7; border-radius: 9px; padding: 13px 14px; outline: none; font-size: 15px; color: var(--deep); text-transform: none; letter-spacing: normal; font-weight: 450; }
+.form-grid input:focus, .form-grid textarea:focus { border-color: #839d4b; box-shadow: 0 0 0 3px #c9f45b45; }
+.form-grid textarea { resize: vertical; } .input-suffix { position: relative; }
+.input-suffix i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #80908d; font-style: normal; font-size: 13px; text-transform: none; }
+.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 28px; }
+.upload-button { height: 48px; display: flex; align-items: center; gap: 8px; border: 1px dashed #91a29a; border-radius: 10px; padding: 0 17px; color: #526461; font-size: 13px; cursor: pointer; }
+.upload-button svg { width: 17px; } .upload-button input { display: none; }
+.success-state { min-height: 510px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
+.success-state > svg { width: 58px; height: 58px; color: #789b2d; margin-bottom: 24px; }
+.success-state h2 { font-family: Georgia, serif; font-size: 56px; font-weight: 400; margin: 8px 0; }
+.success-state p { color: #647471; max-width: 370px; line-height: 1.5; } .success-state button { margin-top: 25px; background: var(--deep); }
+
+footer { min-height: 118px; background: var(--deep); color: #dbe4df; padding: 28px max(32px, calc((100vw - 1360px) / 2)); display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 28px; }
+footer .brand-mark { border-color: #ffffff32; } footer p { font-size: 12px; color: #92a4a0; line-height: 1.5; } footer > span { font-family: Georgia, serif; font-style: italic; color: var(--lime); }
+
+@media (max-width: 1040px) {
+  .content-grid { width: min(100% - 36px, 900px); } .topbar { width: calc(100% - 36px); grid-template-columns: 1fr auto; height: auto; min-height: 78px; }
+  .live-badge { display: none; } .intro { grid-template-columns: 1fr; gap: 34px; padding-top: 54px; } .lake-card { height: 280px; }
+  .dashboard { grid-template-columns: 1fr; } .detail-card { position: relative; top: auto; } .how-it-works { grid-template-columns: 1fr; }
+  .submit-page { grid-template-columns: 1fr; gap: 38px; } .submit-intro { position: relative; top: auto; }
+}
+@media (max-width: 720px) {
+  .content-grid { width: calc(100% - 28px); } .topbar { width: 100%; padding: 13px 14px 0; display: flex; flex-wrap: wrap; }
+  .brand { flex: 1; } .brand-mark { width: 38px; height: 38px; } .brand-name { font-size: 15px; } .brand-name strong { font-size: 17px; }
+  .main-nav { order: 2; width: 100% !important; height: 46px !important; overflow-x: auto; justify-content: flex-start !important; gap: 13px !important; }
+  .main-nav button { flex: 0 0 auto; font-size: 13px; } .main-nav button svg { display: none; }
+  .intro { padding-top: 48px; } .intro h1, .subpage-title h1, .submit-intro h1 { font-size: 55px; } .intro-copy > p { font-size: 16px; }
+  .lake-card { height: 225px; } .lake-overlay strong { font-size: 17px; }
+  .filters-wrap { position: relative; padding: 18px 0; } .filters { grid-template-columns: 1fr 1fr; }
+  .search-button { padding-inline: 12px; } .dashboard { padding: 45px 0 74px; } .section-heading h2, .how-it-works h2 { font-size: 34px; }
+  .spot-card { grid-template-columns: 34px 1fr; padding: 18px 18px 18px 14px; gap: 10px; } .spot-rank { width: 30px; height: 30px; font-size: 12px; }
+  .spot-topline { align-items: flex-start; justify-content: space-between; gap: 6px; } .spot-main h3 { font-size: 22px; }
+  .spot-stats { grid-column: 2; border: 0; border-top: 1px solid #e2e8e2; padding: 13px 0 0; grid-template-columns: 70px 70px 1fr; align-items: center; }
+  .sparkline { grid-column: auto; } .card-arrow { display: none; } .detail-card { padding: 22px 18px; }
+  .detail-score { grid-template-columns: 105px 1fr; gap: 15px; } .score-ring { width: 100px; height: 100px; }
+  .principles { grid-template-columns: 1fr; } .how-it-works { padding: 64px 0; gap: 40px; } .principles h3 { margin-top: 12px; }
+  .subpage { padding-top: 56px; } .subpage-title { grid-template-columns: 1fr; gap: 15px; margin-bottom: 35px; }
+  .record-toolbar { flex-wrap: wrap; gap: 18px; } .source-label { width: 100%; margin-left: 0; }
+  .records-table thead { display: none; } .records-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 18px; border-top: 1px solid #dde5de; }
+  .records-table td, .records-table td:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px; border: 0; font-family: inherit; font-size: 13px; }
+  .records-table td::before { content: attr(data-label); color: #788885; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; } .records-table td:first-child svg { display: none; }
+  .catch-form { padding: 22px 17px; } .form-grid { grid-template-columns: 1fr; } .form-grid label.wide { grid-column: auto; }
+  .form-heading { align-items: flex-start; } .form-heading small { max-width: 120px; text-align: right; }
+  .form-actions { flex-direction: column; align-items: stretch; } .upload-button, .submit-button { justify-content: center; }
+  footer { grid-template-columns: 1fr auto; padding: 30px 20px; } footer p { grid-column: 1 / -1; order: 3; }
+}
+@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

design-reference/app/layout.tsx

@@ -0,0 +1,12 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Ни хвоста, ни чешуи — живая карта клёва RF4",
+  description: "Свежие точки, рабочие приманки и понятная статистика клёва в Russian Fishing 4.",
+  icons: { icon: "/favicon.svg", shortcut: "/favicon.svg" },
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return <html lang="ru"><body>{children}</body></html>;
+}

design-reference/app/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { FormEvent, useMemo, useState } from "react";
+import { ArrowUpRight, CheckCircle2, ChevronRight, Clock3, FishSymbol, Gauge, MapPin, Plus, Search, Send, Sparkles, Trophy, Users, Waves } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+type Spot = { id: number; water: string; fish: string; coords: string; bait: string; method: string; score: number; confidence: number; reports: number; anglers: number; last: string; avg: string; peak: string; trend: number[]; note: string };
+
+const spots: Spot[] = [
+  { id: 1, water: "Вьюнок", fish: "Щука обыкновенная", coords: "110:103", bait: "Spiker #2 01-015", method: "Вращение · 25", score: 92, confidence: 87, reports: 27, anglers: 11, last: "34 мин", avg: "1,84 кг", peak: "18:00–22:00", trend: [28,42,36,57,51,72,84,92], note: "Стабильная серия вечерних уловов. Лучше работает проводка поперёк русла." },
+  { id: 2, water: "Куори", fish: "Форель озёрная", coords: "117:92", bait: "Hornet 1-002", method: "Равномерная · 30", score: 78, confidence: 72, reports: 14, anglers: 7, last: "1 ч 12 мин", avg: "2,31 кг", peak: "05:00–09:00", trend: [31,47,44,62,69,61,74,78], note: "Утреннее окно держится второй день. Данных меньше, чем по Вьюнку." },
+  { id: 3, water: "Белая", fish: "Голавль", coords: "72:58", bait: "Aikkila 4 г 006", method: "Против течения · 20", score: 64, confidence: 81, reports: 18, anglers: 9, last: "2 ч 08 мин", avg: "0,92 кг", peak: "11:00–15:00", trend: [72,68,57,49,55,62,61,64], note: "Клёв ровный, но без всплеска. Точка хорошо подтверждена разными игроками." },
+  { id: 4, water: "Лосиное озеро", fish: "Окунь", coords: "44:51", bait: "Express Spinner 2-004", method: "Stop&Go · 18", score: 49, confidence: 58, reports: 8, anglers: 4, last: "3 ч 41 мин", avg: "0,41 кг", peak: "07:00–11:00", trend: [58,62,55,44,39,46,52,49], note: "Свежих сообщений немного. Подходит скорее для опыта, чем для заработка." },
+];
+
+const records = [
+  ["Щука обыкновенная", "18,642 кг", "Ладожское озеро", "Hunter 2-012", "SibirianFox", "сегодня, 08:14"],
+  ["Форель озёрная", "14,081 кг", "Куори", "Hornet 1-002", "Taimen", "сегодня, 06:47"],
+  ["Голавль", "7,923 кг", "Белая", "Aikkila 4 г 006", "Vega_Altai", "вчера, 21:18"],
+  ["Окунь", "4,218 кг", "Вьюнок", "Spiker #2 01-015", "Rybachok", "вчера, 16:03"],
+];
+
+function ScoreRing({ value }: { value: number }) {
+  return <div className="score-ring" style={{ "--score": `${value * 3.6}deg` } as React.CSSProperties}><div><strong>{value}</strong><span>из 100</span></div></div>;
+}
+
+function Sparkline({ values }: { values: number[] }) {
+  const points = values.map((value, index) => `${index * (100 / (values.length - 1))},${48 - value * 0.38}`).join(" ");
+  return <svg className="sparkline" viewBox="0 0 100 52" preserveAspectRatio="none" aria-label="Динамика активности"><path d={`M0,52 L${points} L100,52 Z`} className="spark-area" /><polyline points={points} className="spark-line" /></svg>;
+}
+
+function Brand() {
+  return <div className="brand" aria-label="Ни хвоста, ни чешуи"><div className="brand-mark"><FishSymbol /></div><div className="brand-name"><span>Ни хвоста,</span><strong>ни чешуи</strong></div></div>;
+}
+
+export default function Home() {
+  const [water, setWater] = useState("all");
+  const [fish, setFish] = useState("all");
+  const [period, setPeriod] = useState("24");
+  const [selectedId, setSelectedId] = useState(1);
+  const [sent, setSent] = useState(false);
+  const visibleSpots = useMemo(() => spots.filter((spot) => (water === "all" || spot.water === water) && (fish === "all" || spot.fish === fish)), [water, fish]);
+  const selected = spots.find((spot) => spot.id === selectedId) ?? spots[0];
+  function submitCatch(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setSent(true); }
+
+  return (
+    <Tabs defaultValue="pulse" className="site-shell">
+      <header className="topbar">
+        <Brand />
+        <TabsList variant="line" className="main-nav" aria-label="Разделы сайта">
+          <TabsTrigger value="pulse"><Waves /> Сейчас клюёт</TabsTrigger>
+          <TabsTrigger value="records"><Trophy /> Рекорды</TabsTrigger>
+          <TabsTrigger value="submit"><Plus /> Добавить улов</TabsTrigger>
+        </TabsList>
+        <div className="live-badge"><span /> Данные обновлены 4 мин назад</div>
+      </header>
+
+      <TabsContent value="pulse"><main>
+        <section className="intro content-grid">
+          <div className="intro-copy"><div className="eyebrow"><span>RF4</span> Живая карта клёва</div><h1>Выбирай место,<br /><em>пока клюёт.</em></h1><p>Свежие точки, рабочие приманки и честная оценка данных от игроков.</p></div>
+          <div className="lake-card"><img src="/lake-dawn.png" alt="Туманное озеро на рассвете с поплавком" /><div className="lake-overlay"><div><span className="overline">Пульс водоёмов</span><strong>3 точки набирают активность</strong></div><div className="pulse-orb"><span /></div></div></div>
+        </section>
+
+        <section className="filters-wrap"><div className="filters content-grid">
+          <label className="filter-field"><span>Водоём</span><Select value={water} onValueChange={setWater}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="all">Все доступные</SelectItem><SelectItem value="Вьюнок">Вьюнок</SelectItem><SelectItem value="Куори">Куори</SelectItem><SelectItem value="Белая">Белая</SelectItem><SelectItem value="Лосиное озеро">Лосиное озеро</SelectItem></SelectContent></Select></label>
+          <label className="filter-field"><span>Рыба</span><Select value={fish} onValueChange={setFish}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="all">Любая рыба</SelectItem><SelectItem value="Щука обыкновенная">Щука</SelectItem><SelectItem value="Форель озёрная">Форель озёрная</SelectItem><SelectItem value="Голавль">Голавль</SelectItem><SelectItem value="Окунь">Окунь</SelectItem></SelectContent></Select></label>
+          <label className="filter-field"><span>Период</span><Select value={period} onValueChange={setPeriod}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="6">Последние 6 часов</SelectItem><SelectItem value="12">Последние 12 часов</SelectItem><SelectItem value="24">Последние сутки</SelectItem><SelectItem value="72">Последние 3 дня</SelectItem></SelectContent></Select></label>
+          <Button className="search-button"><Search /> Найти клёв</Button>
+        </div></section>
+
+        <section className="dashboard content-grid">
+          <div className="results-column"><div className="section-heading"><div><span className="overline">За {period === "24" ? "последние сутки" : `${period} часов`}</span><h2>Горячие точки</h2></div><div className="result-count">{visibleSpots.length} {visibleSpots.length === 1 ? "точка" : "точки"}</div></div>
+            <div className="spot-list">{visibleSpots.map((spot, index) => (
+              <button key={spot.id} className={`spot-card ${selected.id === spot.id ? "selected" : ""}`} onClick={() => setSelectedId(spot.id)}>
+                <div className="spot-rank">0{index + 1}</div><div className="spot-main"><div className="spot-topline"><span>{spot.water}</span><span className={`activity-pill level-${Math.ceil(spot.score / 25)}`}><i /> {spot.score >= 80 ? "Очень высокий" : spot.score >= 60 ? "Высокий" : "Средний"}</span></div><h3>{spot.fish}</h3><div className="spot-meta"><span><MapPin /> {spot.coords}</span><span><Clock3 /> {spot.last} назад</span></div><div className="bait-line"><FishSymbol /><div><span>Работает сейчас</span><strong>{spot.bait}</strong></div></div></div>
+                <div className="spot-stats"><div><strong>{spot.reports}</strong><span>уловов</span></div><div><strong>{spot.anglers}</strong><span>игроков</span></div><Sparkline values={spot.trend} /></div><ChevronRight className="card-arrow" />
+              </button>
+            ))}{visibleSpots.length === 0 && <div className="empty-state"><Search /><h3>Пока нет свежих данных</h3><p>Попробуйте другой водоём или рыбу.</p></div>}</div>
+          </div>
+          <aside className="detail-card"><div className="detail-head"><div><span className="overline">Подробно о точке</span><h2>{selected.water} <em>{selected.coords}</em></h2></div><button className="icon-button" aria-label="Открыть полную карточку"><ArrowUpRight /></button></div>
+            <div className="detail-score"><ScoreRing value={selected.score} /><div><span>Индекс активности</span><strong>{selected.score >= 80 ? "Клёв отличный" : selected.score >= 60 ? "Клёв хороший" : "Клёв умеренный"}</strong><p>{selected.note}</p></div></div>
+            <div className="metric-grid"><div><Gauge /><span>Уверенность</span><strong>{selected.confidence}%</strong></div><div><Users /><span>Игроков</span><strong>{selected.anglers}</strong></div><div><Clock3 /><span>Пик клёва</span><strong>{selected.peak}</strong></div><div><FishSymbol /><span>Средний вес</span><strong>{selected.avg}</strong></div></div>
+            <div className="detail-section"><span className="overline">Лучшая связка</span><div className="lure-chip"><div className="lure-dot" /><div><strong>{selected.bait}</strong><span>{selected.method}</span></div><span>43%</span></div><div className="lure-chip"><div className="lure-dot secondary" /><div><strong>Zeiman Spinner 3-008</strong><span>Равномерная · 22</span></div><span>21%</span></div></div>
+            <div className="confidence-note"><CheckCircle2 /><span><strong>Данные надёжные.</strong> Точку подтвердили несколько разных игроков.</span></div>
+          </aside>
+        </section>
+        <section className="how-it-works content-grid"><div><span className="overline">Как читать данные</span><h2>Не обещаем рыбу.<br />Показываем факты.</h2></div><div className="principles"><article><span>01</span><h3>Свежесть</h3><p>Чем старше сообщение, тем меньше оно влияет на активность.</p></article><article><span>02</span><h3>Разные игроки</h3><p>Десять уловов одного человека не равны десяти подтверждениям.</p></article><article><span>03</span><h3>Уверенность</h3><p>Каждая оценка объясняет, сколько данных за ней стоит.</p></article></div></section>
+      </main></TabsContent>
+
+      <TabsContent value="records"><main className="subpage content-grid"><div className="subpage-title"><div><span className="eyebrow"><span>RF4</span> Официальные данные</span><h1>Рекорды <em>недели</em></h1></div><p>Таблицы обновляются автоматически. Координаты точек в официальных рекордах не публикуются.</p></div><div className="record-toolbar"><div className="record-stat"><Trophy /><div><strong>428</strong><span>рекордов за неделю</span></div></div><div className="record-stat"><Sparkles /><div><strong>37</strong><span>новых сегодня</span></div></div><span className="source-label">Источник: официальный сайт RF4 · демоданные</span></div><div className="records-table-wrap"><table className="records-table"><thead><tr><th>Рыба</th><th>Вес</th><th>Водоём</th><th>Наживка / приманка</th><th>Игрок</th><th>Дата</th></tr></thead><tbody>{records.map((row) => <tr key={row.join("-")}>{row.map((cell, index) => <td key={cell} data-label={["Рыба", "Вес", "Водоём", "Приманка", "Игрок", "Дата"][index]}>{index === 0 && <FishSymbol />}{cell}</td>)}</tr>)}</tbody></table></div></main></TabsContent>
+
+      <TabsContent value="submit"><main className="subpage submit-page content-grid"><div className="submit-intro"><span className="eyebrow"><span>+1</span> Помочь сообществу</span><h1>Добавить<br /><em>свой улов</em></h1><p>Полминуты — и рабочая точка появится в общей статистике после проверки.</p><div className="submit-tip"><FishSymbol /><div><strong>Скриншот повышает доверие</strong><span>Можно загрузить экран улова или оставить ссылку на публикацию.</span></div></div></div>
+        <form className="catch-form" onSubmit={submitCatch}>{sent ? <div className="success-state"><CheckCircle2 /><span className="overline">Улов отправлен</span><h2>Ни хвоста!</h2><p>Спасибо. Запись появится в статистике после проверки.</p><Button type="button" onClick={() => setSent(false)}>Добавить ещё один</Button></div> : <><div className="form-heading"><span>Новый улов</span><small>Поля со звёздочкой обязательны</small></div><div className="form-grid"><label><span>Рыба *</span><input required placeholder="Например, щука" /></label><label><span>Вес *</span><div className="input-suffix"><input required inputMode="decimal" placeholder="2,846" /><i>кг</i></div></label><label><span>Водоём *</span><input required placeholder="Вьюнок" /></label><label><span>Координаты *</span><input required pattern="[0-9]+:[0-9]+" placeholder="110:103" /></label><label className="wide"><span>Приманка или наживка</span><input placeholder="Spiker #2 01-015" /></label><label><span>Проводка</span><input placeholder="Вращение" /></label><label><span>Скорость</span><input inputMode="numeric" placeholder="25" /></label><label className="wide"><span>Комментарий</span><textarea rows={3} placeholder="Время клёва, глубина, особенности точки…" /></label></div><div className="form-actions"><label className="upload-button"><Plus /> Добавить скриншот<input type="file" accept="image/png,image/jpeg,image/webp" /></label><Button type="submit" className="submit-button"><Send /> Отправить на проверку</Button></div></>}</form>
+      </main></TabsContent>
+
+      <footer><Brand /><p>Неофициальный проект для игроков Russian Fishing 4. Все данные на макете демонстрационные.</p><span>НХНЧ · 2026</span></footer>
+    </Tabs>
+  );
+}