Skip to content

Redesign canvas page in Microsoft Windows 2000 style#1

Open
FuJacob wants to merge 1 commit into
mainfrom
v0/fujacob-63a511a3
Open

Redesign canvas page in Microsoft Windows 2000 style#1
FuJacob wants to merge 1 commit into
mainfrom
v0/fujacob-63a511a3

Conversation

@FuJacob
Copy link
Copy Markdown
Owner

@FuJacob FuJacob commented Apr 2, 2026

Windows 2000 Style Redesign

Completely redesigns the /canvas/:id page UI with an authentic Microsoft Windows 2000 aesthetic.

Changes

CSS System (index.css)

  • All design tokens replaced with Win2000 palette: silver #d4d0c8, navy #000080, teal #008080
  • New utility classes: .w2k-window, .w2k-titlebar, .w2k-raised, .w2k-sunken, .w2k-btn, .w2k-input, .w2k-statusbar, .w2k-separator
  • Authentic 3D border effect using 4-side highlight/shadow technique
  • Dark theme reimplemented as Win2000 High Contrast mode
  • Range input styled as classic Win2000 slider

Canvas Background

  • Changed to Win2000 teal desktop (#008080) with a subtle crosshatch grid overlay

UI Panels (ToolPanel, SpawnPanel, ThemePanel, CanvasPresenceBar)

  • Each wrapped in .w2k-window with a blue gradient .w2k-titlebar and emoji icon
  • Buttons use .w2k-btn with classic raised 3D border, pressed state on :active

Node Renderers (Note, Problem, Code, TestResults)

  • All nodes now render as Win2000 windows with title bars and classic chrome
  • Problem node shows difficulty with colored badges, content in sunken inset panel
  • Code node editor in sunken inset with Win2000 Run button in titlebar
  • TestResults uses Win2000 tab strip for Testcase/Result modes

SelectionOverlay

  • Resize handles use Win2000 3D raised style with navy inner square
  • Action toolbar (Clone/Delete) wrapped in .w2k-window
  • Selection border uses navy #000080 with white dotted outline

Typography

  • MS Sans SerifMicrosoft Sans SerifTahomaGenevaArial font stack globally applied via index.html

- Replace all CSS tokens with Win2000 color palette (silver, navy, teal, classic 3D borders)
- Add w2k-window, w2k-titlebar, w2k-raised, w2k-sunken, w2k-btn CSS classes
- Canvas background changed to Windows 2000 teal desktop with subtle grid
- ToolPanel, SpawnPanel, ThemePanel, CanvasPresenceBar redesigned as Win2000 windows
- All node renderers (Note, Problem, Code, TestResults) get classic window chrome with title bars
- SelectionOverlay uses navy 2000-style handles and 3D raised action buttons
- Dark theme now uses Win2000 High Contrast style
- index.html: MS Sans Serif / Tahoma font stack applied globally
@vercel vercel Bot added the v0 label Apr 2, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
leet-canvas Error Error Apr 2, 2026 2:41am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant