diff --git a/AGENTS.md b/AGENTS.md index 454186c..0f58c7e 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -14,28 +14,30 @@ Guidance for AI agents (and humans) working on Vision Start. Read before making ## 1. Styling guidance -The design language is **glassmorphism**: translucent black surfaces, backdrop blur, thin light borders, subtle shadows, cyan accents, and iOS-like easing. +The design language is **light liquid glass**: translucent bright surfaces, refractive edge highlights, backdrop blur, soft shadows, cyan accents, and iOS-like easing. ### Surface recipe (use consistently) -- **Cards / modals / panels:** `bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl shadow-lg` -- **Inputs:** `bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400` -- **Floating buttons (corner):** `bg-black/25 backdrop-blur-md border border-white/10 rounded-xl ... hover:bg-white/25 active:scale-90` -- **Full-screen modal overlay:** `bg-black/90 backdrop-blur-sm` (modals) or `bg-black/60 backdrop-blur-sm` (drawers) -- **Slide-in drawer:** `bg-black/50 backdrop-blur-xl border-l border-white/10` +- **Tiles / floating controls / light surfaces:** `liquid-surface` plus `liquid-control` / `liquid-tile` / `liquid-focus` as appropriate. +- **Cards / modals / panels:** `liquid-panel liquid-modal-card rounded-3xl` for centered modals; `liquid-drawer` for the settings drawer. +- **Inputs:** `liquid-input p-3`; ranges use `liquid-range`. +- **Buttons:** `liquid-button` plus one of `liquid-button-primary`, `liquid-button-success`, `liquid-button-secondary`, or `liquid-button-danger`. +- **Add/edit surfaces:** add tiles use `liquid-ghost-tile`; tile edit controls use `liquid-edit-toolbar` and `liquid-edit-action`. +- **Full-screen modal overlay:** `liquid-modal-backdrop`. ### Color tokens -- Accent / focus / selection: `cyan-400` (focus ring), `cyan-500` (active/selected background) -- Confirm/Save: `green-500` → `hover:bg-green-400` -- Cancel/secondary: `gray-600` → `hover:bg-gray-500` -- Destructive: `red-500` → `hover:bg-red-400` -- Tertiary (export/import etc.): `slate-700` → `hover:bg-slate-600` -- Status: online `bg-green-500`, offline `bg-red-500`, pending `bg-gray-500` +- Accent / focus / selection: cyan via `liquid-focus`, `cyan-400`, `cyan-200`, and `liquid-button-primary` +- Confirm/Save: `liquid-button-success` +- Cancel/secondary: `liquid-button-secondary` +- Destructive: `liquid-button-danger` or red text on `liquid-edit-action` +- Tertiary (export/import etc.): `liquid-button-secondary` +- Status: online `bg-green-400 text-green-400`, offline `bg-red-400 text-red-400`, pending `bg-slate-400 text-slate-400` - Text: primary `text-white`, secondary `text-slate-300`/`text-slate-400`, muted `text-white/50` (in-app hover states) ### Motion -- Use the custom easing tokens defined in `index.css`: `ease-ios` (default) and `ease-spring` (toggle knobs, drawer slides). -- Standard durations: `duration-150` (buttons), `duration-200` (tiles, toggles, icons), `duration-250`/`duration-300` (modals, drawers). -- Micro-interactions are encouraged: `hover:scale-[1.04]`, `active:scale-90` / `active:scale-95` / `active:scale-[0.96]`, `hover:bg-white/25`. +- Use the custom easing tokens defined in `index.css`: `ease-ios` (default), `ease-spring` (toggle knobs, drawer slides), and `ease-liquid` (tile lift and wallpaper transitions). +- Standard durations: `duration-150` (buttons), `duration-200` (tiles, toggles, icons), and `duration-300` (drawers/modals). +- Prefer the shared liquid classes for hover/press motion. Add custom transforms only when the shared classes do not cover the interaction. +- Keep `prefers-reduced-motion` behavior intact when adding animations. ### Tailwind specifics - Tailwind **v4** via `@tailwindcss/vite` and `@tailwindcss/postcss`. Custom easing is in `index.css` under `@theme {}` — add new theme tokens there, not in `tailwind.config.js`. @@ -45,7 +47,7 @@ The design language is **glassmorphism**: translucent black surfaces, backdrop b ### Components with established conventions to reuse - `Dropdown` (`components/Dropdown.tsx`) for selects — single or multi. Has a glassy look and custom arrow. **Always use it** instead of `` for option picking. - `ToggleSwitch` (`components/ToggleSwitch.tsx`) for boolean toggles — **always use it** instead of checkboxes. -- Modal pattern: backdrop + centered glass card (`bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl`), close on overlay click via `handleOverlayClick` (`if (e.target === e.currentTarget) onClose()`). +- Modal pattern: `liquid-modal-backdrop` + centered `liquid-panel liquid-modal-card rounded-3xl`, close on overlay click via `handleOverlayClick` (`if (e.target === e.currentTarget) onClose()`). - New editors/settings go in `components/configuration/` as a `*Tab.tsx` and are wired into `ConfigurationModal.tsx`. - New options' size presets follow the existing scale: `tiny | small | medium | large` (see `Header.tsx`, `WebsiteTile.tsx`). @@ -83,7 +85,7 @@ A "feature" in this project typically means: a new widget, a new settings option 12. If a new field changes behavior in a way that existing users' stored data should be preserved differently, handle the migration inside `loadConfig` (and consider bumping the export `version` field in `exportConfig` if the shape changes non-additively). ### G. Style of new tiles/widgets -13. A new widget should follow the existing widget shape: optional/gated by `config..enabled`, positioned with a glass container, and use the surface/duration/easing tokens above. +13. A new widget should follow the existing widget shape: optional/gated by `config..enabled`, positioned with a liquid glass container, and use the surface/duration/easing tokens above. 14. New "editable" tiles/content reuse the `isEditing` mode and the edit/move/delete affordances pattern from `WebsiteTile.tsx` and `CategoryGroup.tsx`. --- @@ -108,6 +110,6 @@ A "feature" in this project typically means: a new widget, a new settings option - Read `project-context.md`. - Mirror the nearest existing equivalent (a similar widget, modal, or config tab) before inventing a new pattern. -- Favor the established glass tokens (`bg-black/25`, `backdrop-blur-md`, `border-white/10`, `cyan-400/500`) over ad-hoc colors. +- Favor the established liquid utilities (`liquid-surface`, `liquid-panel`, `liquid-input`, `liquid-button`, `liquid-focus`) over ad-hoc glass class strings. - Surface failing assumptions (CORS, missing chrome.storage, larger-than-4MB wallpapers) with clear errors, matching the style of `StorageLocalManager.ts` and `iconService.ts`. - Update `project-context.md` after your change. diff --git a/App.tsx b/App.tsx index a464048..2437859 100644 --- a/App.tsx +++ b/App.tsx @@ -200,7 +200,7 @@ const App: React.FC = () => { return (
{
-
+
{categories.map((category) => ( { setEditingCategory(null); setIsCategoryModalOpen(true); }} - className="text-white/50 hover:text-white active:scale-90 transition-all duration-150 ease-ios" + className="liquid-surface liquid-control liquid-ghost-tile liquid-focus min-h-16 px-6 text-sm font-bold" + aria-label="Add category" > - - - + + Add category
)} @@ -296,4 +298,4 @@ const App: React.FC = () => { ); } -export default App; \ No newline at end of file +export default App; diff --git a/README.md b/README.md index 6f27d06..acd5519 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,17 @@ Vision Start
-A glassmorphism-looking like, modern and customizable startpage built with React. +A light liquid-glass, modern and customizable startpage built with React.
Try it here: http://vision-start.ivanch.me ## Screenshots -![Vision Start with the Dark background](screenshots/dark-page.png) -![Editing page with Abstract Red background](screenshots/editing-abstract-red.png) -![Configuration Tab opened](screenshots/configuration-abstract-red.png) +![Vision Start liquid glass home](screenshots/liquid-home.png) +![Vision Start liquid glass editing](screenshots/liquid-editing.png) +![Vision Start liquid glass configuration](screenshots/liquid-configuration.png) +![Vision Start liquid glass mobile](screenshots/liquid-mobile.png) ## Installing @@ -30,7 +31,7 @@ Vision Start is not yet available on Chrome Web Store, but it can be installed m * **Customizable Website Tiles:** Add, edit, and organize your favorite websites for quick access. * **Elegant Clock:** A clock because all startpages have one. * **Server Status Widgets:** Monitor the status of services directly from the startpage. -* **Glassmorphism UI:** A modern and stylish interface with a frosted glass effect. +* **Liquid Glass UI:** A modern, light interface with frosted surfaces, soft highlights, and gentle motion. * **Icon Library:** It uses the [Dashboard Icon library](https://dashboardicons.com/) for a better look and feel. It also supports auto-fetch for some websites. * **Settings:** A settings page to configure the startpage, with export/import functionality. diff --git a/components/CategoryEditModal.tsx b/components/CategoryEditModal.tsx index dcd8979..dccf6f9 100644 --- a/components/CategoryEditModal.tsx +++ b/components/CategoryEditModal.tsx @@ -19,31 +19,31 @@ const CategoryEditModal: React.FC = ({ category, edit, o }; return ( -
-
-

{edit ? 'Edit Category' : 'Add Category'}

+
+
+

{edit ? 'Edit Category' : 'Add Category'}

setName(e.target.value)} - className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400" + className="liquid-input p-3" />
{edit && ( - )}
-
- -
diff --git a/components/Clock.tsx b/components/Clock.tsx index c9010f8..c29af91 100644 --- a/components/Clock.tsx +++ b/components/Clock.tsx @@ -56,9 +56,8 @@ const Clock: React.FC = ({ config, getClockSizeClass }) => { return (
diff --git a/components/ConfigurationModal.tsx b/components/ConfigurationModal.tsx index 4d783a4..a868de3 100644 --- a/components/ConfigurationModal.tsx +++ b/components/ConfigurationModal.tsx @@ -133,7 +133,7 @@ const ConfigurationModal: React.FC = ({ return (
= ({
-
-

Configuration

+
+

Configuration

-
+
{tabs.map((tab) => (
-
-
+
+
@@ -211,19 +211,19 @@ const ConfigurationModal: React.FC = ({ onChange={handleImportConfig} />
-
+
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx index 3f36f6f..11ee724 100644 --- a/components/Dropdown.tsx +++ b/components/Dropdown.tsx @@ -71,7 +71,7 @@ const Dropdown: React.FC = ({ options, value, onChange, name, mul
); diff --git a/components/ServerWidget.tsx b/components/ServerWidget.tsx index fc65026..f43c606 100644 --- a/components/ServerWidget.tsx +++ b/components/ServerWidget.tsx @@ -15,11 +15,11 @@ interface ServerWidgetProps { const getStatusColor = (status: string) => { switch (status) { case 'online': - return 'bg-green-500'; + return 'bg-green-400 text-green-400'; case 'offline': - return 'bg-red-500'; + return 'bg-red-400 text-red-400'; default: - return 'bg-gray-500'; + return 'bg-slate-400 text-slate-400'; } }; @@ -71,13 +71,11 @@ const ServerWidget: React.FC = ({ config }) => { } return ( -
-
+
+
{config.serverWidget.servers.map((server) => (
-
+
{server.name} @@ -88,4 +86,4 @@ const ServerWidget: React.FC = ({ config }) => { ); }; -export default ServerWidget; \ No newline at end of file +export default ServerWidget; diff --git a/components/ToggleSwitch.tsx b/components/ToggleSwitch.tsx index c90946d..c873f69 100644 --- a/components/ToggleSwitch.tsx +++ b/components/ToggleSwitch.tsx @@ -11,14 +11,20 @@ const ToggleSwitch: React.FC = ({ checked, onChange }) => { }; return ( -
-
+ ); }; diff --git a/components/Wallpaper.tsx b/components/Wallpaper.tsx index e26e237..b98cc65 100644 --- a/components/Wallpaper.tsx +++ b/components/Wallpaper.tsx @@ -128,17 +128,18 @@ const Wallpaper: React.FC = ({ wallpaperNames, blur, brightness, if (!imageUrl) return null; return ( -
+ <> +
+