{
  "id": "retro-web",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "复古互联网",
    "en": "Retro Web"
  },
  "aliases": [
    "老网页",
    "早期互联网",
    "个人主页风格",
    "Web 1.0",
    "old-school web",
    "retro website"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "借用早期个人网站与桌面浏览器的视觉语言：灰色凹凸边框、衬线文字、蓝色下划线链接、侧栏目录和访客计数器。它表达的是手工制作网页的亲切感；不等同于像素艺术，也不需要牺牲今天的键盘操作、响应式布局和阅读体验。",
    "en": "A visual language borrowed from early personal websites and desktop browsers: grey beveled borders, serif text, blue underlined links, directory sidebars and visitor counters. It recalls the intimacy of a handmade website without sacrificing modern keyboard access, responsive layout or readability."
  },
  "use_when": [
    {
      "zh": "个人主页、爱好者站点、互联网历史展览或怀旧创意项目。",
      "en": "Personal sites, fan pages, internet-history exhibits and nostalgic creative projects."
    },
    {
      "zh": "希望强调手工整理、慢慢发现和个人表达的内容。",
      "en": "Content that celebrates human curation, slow discovery and personal expression."
    }
  ],
  "avoid_when": [
    {
      "zh": "高密度工作系统或依赖可信支付与身份验证的关键流程。",
      "en": "Dense work applications and critical payment or identity flows."
    },
    {
      "zh": "不要复制闪烁文字、弹窗广告、固定宽度和过小触控目标等旧网页缺陷。",
      "en": "Do not bring back blinking text, pop-up ads, rigid widths or tiny touch targets."
    }
  ],
  "tags": [
    "retro-web",
    "web-1.0",
    "nostalgia",
    "beveled",
    "hyperlinks"
  ],
  "variants": [
    {
      "id": "personal-homepage",
      "name": {
        "zh": "个人主页",
        "en": "Personal homepage"
      },
      "note": {
        "zh": "目录侧栏、短文和精选链接组成的手工小站。",
        "en": "A handmade site with a directory sidebar, short writing and curated links."
      }
    },
    {
      "id": "desktop-browser",
      "name": {
        "zh": "旧浏览器窗口",
        "en": "Vintage browser window"
      },
      "note": {
        "zh": "用标题栏、菜单和凹凸边框营造桌面窗口层次。",
        "en": "Title bars, menus and beveled borders evoke a desktop window."
      }
    }
  ],
  "applicable_components": [
    "button",
    "card",
    "input",
    "tabs"
  ],
  "applicable_pages": [
    "landing-page",
    "profile"
  ],
  "related": [
    {
      "id": "pixel-art",
      "relation": "similar_to"
    },
    {
      "id": "skeuomorphism",
      "relation": "similar_to"
    },
    {
      "id": "y2k",
      "relation": "similar_to"
    },
    {
      "id": "tabs",
      "relation": "used_with"
    }
  ],
  "confusable": [
    {
      "id": "pixel-art",
      "note": {
        "zh": "像素艺术由点阵与有限色板定义；复古互联网由页面结构、超链接和旧浏览器视觉语汇定义，可包含照片与常规文字。",
        "en": "Pixel art is defined by bitmap edges and limited palettes; Retro Web is defined by page structure, hyperlinks and browser-era conventions, and can include photos and ordinary type."
      }
    }
  ],
  "demo": {
    "component": "retro-web",
    "modes": [
      "default"
    ]
  },
  "playground": {
    "task": {
      "zh": "目录与 Back / Forward / Home 在 Home / About / Projects / Links / Guestbook 间往返，本地地址随导航更新，Go 打开原生地址对话框，可输入 home/about/projects/links/guestbook（支持 goodoldnet/ 前缀）并计入站内历史；未知或外部地址提示未找到且不外跳；菜单、Search、Favorites、窗口控制都有可返回的本地行为。留言校验空白输入并展示正常提交结果，明确刷新清空、不发送服务、不写浏览器存储。",
      "en": "Directory and Back / Forward / Home navigate Home / About / Projects / Links / Guestbook; the local address follows navigation. Go opens a native dialog for home/about/projects/links/guestbook (with an optional goodoldnet/ prefix), adding valid navigation to internal history; unknown or external addresses show not-found feedback without leaving the site. Menus, Search, Favorites and window controls have reversible local behavior. Validate blank guestbook input and display accepted messages; disclose reload clears them with no service or browser storage."
    },
    "checks": [
      {
        "zh": "逐一操作 GoodOldNet 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。",
        "en": "Use GoodOldNet’s original navigation and primary CTAs; inspect content and return paths, not just click notices."
      },
      {
        "zh": "用 Go 输入 projects 与 goodoldnet/guestbook 后检查历史前进/后退；再试未知/外部地址，确认未找到反馈且不会外跳。",
        "en": "Enter projects and goodoldnet/guestbook through Go and inspect Back/Forward history; try unknown/external addresses and confirm not-found feedback without external navigation."
      },
      {
        "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。",
        "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries."
      }
    ]
  },
  "sources": [
    {
      "name": "MDN — border-style",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/border-style"
    },
    {
      "name": "MDN — The anchor element",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"
    }
  ],
  "implementation": {
    "css": [
      "border-style",
      "text-decoration",
      "font-family",
      ":focus-visible",
      "flex-wrap"
    ],
    "notes": {
      "zh": "用 inset/outset 或多层阴影表达灰色面板层次；正文使用可读字号，链接保留下划线。视觉样张可以还原固定构图，真实交互区必须换行并支持键盘。留言只用组件状态，明确不持久保存。",
      "en": "Use inset/outset borders or layered shadows for grey panels. Keep readable type and underlined links. A visual study may preserve its composition, while the interactive area must wrap and support keyboards. Store demo messages in component state only and disclose that they are not persisted."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "衬线正文、系统字体菜单、可读的蓝色下划线链接。",
      "en": "Serif body copy, system-font menus and readable blue underlined links."
    },
    "color": {
      "zh": "浅灰窗口、白色内容、深蓝标题栏与链接。",
      "en": "Grey chrome, white content and dark-blue title bars and links."
    },
    "border": {
      "zh": "方角与 2px 凹凸边框，无模糊投影。",
      "en": "Square corners and 2px beveled borders without blurred shadows."
    },
    "shadow": {
      "zh": "使用边框明暗方向表达凹凸，不加模糊阴影。",
      "en": "Use light and dark border edges for relief, without blurred shadows."
    },
    "spacing": {
      "zh": "紧凑但保持足够触控面积，窄屏目录换行。",
      "en": "Compact spacing with adequate targets and a wrapping directory."
    },
    "motion": {
      "zh": "即时切换，避免闪烁和自动滚动。",
      "en": "Immediate changes without blinking or automatic scrolling."
    },
    "states": {
      "zh": "当前页加粗、焦点有清晰轮廓，表单反馈使用实时区域。",
      "en": "Bold current-page text, a clear focus ring and a live region for form feedback."
    }
  },
  "preview": {
    "order": 10,
    "keywords": {
      "zh": "经典界面 · 超链接 · 手作网页",
      "en": "CLASSIC. LINKED. HANDMADE."
    },
    "url": "goodoldnet / home",
    "scene": "generic",
    "brand": "GoodOldNet",
    "nav": [
      {
        "zh": "Home",
        "en": "Home"
      },
      {
        "zh": "About",
        "en": "About"
      },
      {
        "zh": "Projects",
        "en": "Projects"
      },
      {
        "zh": "Links",
        "en": "Links"
      },
      {
        "zh": "Guestbook",
        "en": "Guestbook"
      }
    ],
    "heroTitle": {
      "zh": "Welcome to",
      "en": "Welcome to"
    },
    "heroTitle2": {
      "zh": "GoodOldNet!",
      "en": "GoodOldNet!"
    },
    "heroSub": {
      "zh": "一个值得慢慢发现的互联网角落。",
      "en": "A corner of the internet worth exploring slowly."
    },
    "cta": {
      "zh": "进入站点",
      "en": "Enter the site"
    },
    "panel": "screen",
    "tokens": {
      "bg": "#c4c4c4",
      "fg": "#111111",
      "sub": "#555555",
      "accent": "#000080",
      "accentFg": "#ffffff",
      "card": "#ffffff",
      "cardBorder": "#808080",
      "radius": "0px",
      "font": "Times New Roman, serif"
    }
  },
  "prompts": {
    "basic": {
      "zh": "使用复古互联网风格设计个人主页。保留灰色凹凸窗口、衬线正文、蓝色下划线链接和目录侧栏；保留现代可访问性，不使用闪烁文字和侵入弹窗。",
      "en": "Design a personal homepage in Retro Web style with grey beveled chrome, serif copy, blue underlined links and a directory sidebar. Retain modern accessibility; avoid blinking text and intrusive pop-ups."
    },
    "design": {
      "zh": "以白色内容区和浅灰窗口形成层次，深蓝标题栏配系统字体。紧凑边距、方角和凹凸边框传达旧浏览器质感；链接必须可辨，触控目标不能随缩景变小。",
      "en": "Layer white content inside grey chrome with a dark-blue system-font title bar. Compact spacing, square corners and beveled borders evoke a vintage browser. Keep links recognizable and targets large enough."
    },
    "implementation": {
      "zh": "用当前风格完成 GoodOldNet 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n复用 GoodOldNet 的 #c4c4c4 灰窗口、#164479→#387ebd 蓝色标题栏、inset/outset 凹凸边、Times New Roman 正文与 Arial 菜单。默认内容保持 21% / 54% / 25% 目录/正文/小图三栏与蓝色下划线站内入口，真实阅读区沿用白底深蓝字。窄屏通过现有 toolbar/menu 换行与单列内容重排，不能仅缩小固定旧浏览器；窗口、地址和目录仍由 DOM 组成，焦点、当前页与状态反馈保留语义。\n\n目录与 Back / Forward / Home 在 Home / About / Projects / Links / Guestbook 间往返，本地地址随导航更新，Go 打开原生地址对话框，可输入 home/about/projects/links/guestbook（支持 goodoldnet/ 前缀）并计入站内历史；未知或外部地址提示未找到且不外跳；菜单、Search、Favorites、窗口控制都有可返回的本地行为。留言校验空白输入并展示正常提交结果，明确刷新清空、不发送服务、不写浏览器存储。\n\n静态封面、详情演示与 /style-scenes/retro-web/（英文 /en/style-scenes/retro-web/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。",
      "en": "Build a complete GoodOldNet page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nReuse GoodOldNet’s #c4c4c4 grey chrome, #164479→#387ebd blue title bar, inset/outset bevels, Times New Roman copy and Arial menus. Keep the default 21% / 54% / 25% directory/copy/picture columns and blue underlined internal entries; reading content remains white with dark-blue text. Reflow through the existing wrapping toolbar/menu and single-column rules, never by shrinking a fixed vintage browser. Keep windows, address and directory in DOM with semantic focus, current-page and status feedback.\n\nDirectory and Back / Forward / Home navigate Home / About / Projects / Links / Guestbook; the local address follows navigation. Go opens a native dialog for home/about/projects/links/guestbook (with an optional goodoldnet/ prefix), adding valid navigation to internal history; unknown or external addresses show not-found feedback without leaving the site. Menus, Search, Favorites and window controls have reversible local behavior. Validate blank guestbook input and display accepted messages; disclose reload clears them with no service or browser storage.\n\nShare one renderer between static covers, the detail experience and /style-scenes/retro-web/ (English /en/style-scenes/retro-web/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion."
    },
    "agent": {
      "zh": "用当前风格完成 GoodOldNet 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n复用 GoodOldNet 的 #c4c4c4 灰窗口、#164479→#387ebd 蓝色标题栏、inset/outset 凹凸边、Times New Roman 正文与 Arial 菜单。默认内容保持 21% / 54% / 25% 目录/正文/小图三栏与蓝色下划线站内入口，真实阅读区沿用白底深蓝字。窄屏通过现有 toolbar/menu 换行与单列内容重排，不能仅缩小固定旧浏览器；窗口、地址和目录仍由 DOM 组成，焦点、当前页与状态反馈保留语义。\n\n完整页面操作：\n目录与 Back / Forward / Home 在 Home / About / Projects / Links / Guestbook 间往返，本地地址随导航更新，Go 打开原生地址对话框，可输入 home/about/projects/links/guestbook（支持 goodoldnet/ 前缀）并计入站内历史；未知或外部地址提示未找到且不外跳；菜单、Search、Favorites、窗口控制都有可返回的本地行为。留言校验空白输入并展示正常提交结果，明确刷新清空、不发送服务、不写浏览器存储。\n\n静态封面、详情演示与 /style-scenes/retro-web/（英文 /en/style-scenes/retro-web/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。",
      "en": "Build a complete GoodOldNet page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nReuse GoodOldNet’s #c4c4c4 grey chrome, #164479→#387ebd blue title bar, inset/outset bevels, Times New Roman copy and Arial menus. Keep the default 21% / 54% / 25% directory/copy/picture columns and blue underlined internal entries; reading content remains white with dark-blue text. Reflow through the existing wrapping toolbar/menu and single-column rules, never by shrinking a fixed vintage browser. Keep windows, address and directory in DOM with semantic focus, current-page and status feedback.\n\nFull-page operations:\nDirectory and Back / Forward / Home navigate Home / About / Projects / Links / Guestbook; the local address follows navigation. Go opens a native dialog for home/about/projects/links/guestbook (with an optional goodoldnet/ prefix), adding valid navigation to internal history; unknown or external addresses show not-found feedback without leaving the site. Menus, Search, Favorites and window controls have reversible local behavior. Validate blank guestbook input and display accepted messages; disclose reload clears them with no service or browser storage.\n\nShare one renderer between static covers, the detail experience and /style-scenes/retro-web/ (English /en/style-scenes/retro-web/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results."
    }
  }
}