Windows 98–style admin desktop UI experiment for WebHemi.
Live site: gixx.github.io/webhemi-admin98 — dark landing page with an embedded interactive demo.
A teal desktop shell with draggable icons/windows. Window chrome is an owned SCSS port of the 98.css surface (assets/style/chrome/). Custom code covers the desktop, icons, drag/resize/localStorage, Control Panel feature panel, taskbar, and wizard layout.
Styles are built with Vite, Sass, and Tailwind CSS v4.
Visual language and chrome cues come from jdan/98.css (MIT) — used as inspiration and as a reference for assets/iconography. This project does not depend on the 98.css npm package; chrome styles live in assets/style/chrome/ as an owned SCSS port.
npm install
npm run devThis starts Vite on http://127.0.0.1:8765/ and opens it in your browser.
| URL | Page |
|---|---|
/ |
Public landing (dark theme + embedded demo) |
/demo.html |
Full interactive Win98 desktop |
/catalog.html |
Owned chrome controls in every documented state |
npm run build # production bundle into dist/
npm run preview # serve the production buildFor a production build that matches GitHub Pages asset paths:
VITE_BASE=/webhemi-admin98/ npm run buildPushing to main runs .github/workflows/deploy-pages.yml: install → vite build with VITE_BASE=/webhemi-admin98/ → deploy dist/ via GitHub Pages.
In the repository settings, set Pages → Source to GitHub Actions (once). After the first successful workflow run, the site is at https://gixx.github.io/webhemi-admin98/.
| Path | Role |
|---|---|
assets/style/site.css |
Public landing page |
assets/style/main.css |
Tailwind @theme + design tokens |
assets/style/chrome/ |
Win98 chrome atoms (buttons, window, forms, …) |
assets/style/product/ |
Desktop shell, toolbar, pane layouts, custom scrollbar |
assets/style/abstract/ |
Shared tokens + bevel mixins |
Plans (English):
- Sass + Tailwind style system — architecture & implementation steps (complete through documentation)
- Style system atom catalog — atom/brick inventory and suggested Storybook hierarchy
Early concept. Shell UX: title-bar Close/Minimize/Maximize, double-click icons to open windows (data-open-window), positions persisted in localStorage, taskbar with Start menu and clock. Custom scrollbars for .scrollable hosts (assets/script/scrollbar.js). Win98 chrome is owned SCSS (no npm 98.css dependency).