feat(ui): redesign with transparent liquid glass (#414)

* docs: add design spec for iOS 26 Liquid Glass UI redesign

* docs: add implementation plan for iOS 26 Liquid Glass UI redesign

* feat(ui): add liquid glass CSS variables and update root layouts

* feat(ui): update Card and Modal components to iOS 26 Liquid Glass style

* feat(ui): redesign dashboard page to Liquid Glass style

* feat(ui): redesign node management page cards and charts

* feat(ui): redesign monitor page to Liquid Glass style

* feat(ui): redesign group and panel-sharing cards to Liquid Glass

* feat(ui): redesign settings and user components to Liquid Glass

* feat(ui): redesign profile and auth pages to Liquid Glass

* fix(ui): revert to LineChart to fix compilation issues

* refactor(ui): extract dashboard user header and cleanup admin layout

* feat(ui): refine monitor page hero metrics and fix build

* fix(ui): real data for monitor hero metrics and card padding adjustments

* fix(ui): apply global card padding and fix index layouts

* feat(ui): implement liquid-glass-react for all Card components

* fix(ui): resolve liquid-glass-react rendering issues causing invisible text and broken layout

* fix(ui): native CSS liquid-glass effect replacing NPM package

* fix(ui): cleanup duplicate closing tags and complete liquid glass tables

* fix(ui): apply perfect rounded corners to list views and table headers in non-compact mode

* fix(ui): apply liquid glass styling to grouped rules view in forward page

* fix(ui): re-implement liquid-glass natively to prevent text distortion and remove package dependency

* fix(ui): remove mouse distortion and preserve proper liquid glass texture

* fix(ui): remove svg filter causing text distortion and replace with pure css liquid glass

* fix(ui): apply properly scoped border radius to table headers

* fix(ui): remove hardcoded bg-default-50/60 from TableHeader

* fix(ui): apply global liquid glass styling and transparent overlays to all modals and dialogs

* fix(ui): remove absolute/relative class conflicts hiding Dialog modales and implement pure transparent layout

* feat(ui): apply global liquid glass styling to cards, buttons, and diagnosis modals

vite-frontend/src/pages/index.tsx

@@ -8,9 +8,7 @@ import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Input } from "@/shadcn-bridge/heroui/input";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { siteConfig } from "@/config/site";
-import { title } from "@/components/primitives";
 import { VersionFooter } from "@/components/version-footer";
-import DefaultLayout from "@/layouts/default";
 import { login, LoginData, checkCaptcha, getConfigByName } from "@/api";
 import { writeLoginSession } from "@/utils/session";
 import { useWebViewMode } from "@/hooks/useWebViewMode";
@@ -152,29 +150,36 @@ export default function IndexPage() {
   };
 
   return (
-    <DefaultLayout>
-      <section className="flex flex-col items-center justify-center gap-4 py-4 sm:py-8 md:py-10 pb-20 min-h-[calc(100dvh-120px)] sm:min-h-[calc(100dvh-200px)]">
+    <div className="relative flex flex-col min-h-screen bg-mesh-gradient overflow-hidden">
+      <section className="flex flex-col items-center justify-center flex-1 w-full p-4 relative z-10">
         <motion.div
           animate={{ opacity: 1, y: 0 }}
-          className="w-full max-w-md px-4 sm:px-0"
+          className="w-full max-w-[420px] px-4 sm:px-0"
           initial={{ opacity: 0, y: 24 }}
           transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
         >
-          <Card className="w-full">
+          <Card className="w-full bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4">
             <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
-              <h1 className={title({ size: "sm" })}>登陆</h1>
-              <p className="text-small text-default-500 mt-2">
-                请输入您的账号信息
+              <div className="w-14 h-14 bg-primary rounded-2xl flex items-center justify-center mb-4 shadow-sm text-white">
+                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+              </div>
+              <h1 className="text-2xl font-bold tracking-tight text-foreground">Welcome to Flvx</h1>
+              <p className="text-sm text-default-500 mt-2 font-medium">
+                Sign in to manage your networks
               </p>
             </CardHeader>
-            <CardBody className="px-6 py-6">
-              <div className="flex flex-col gap-4">
+            <CardBody className="px-6 py-6 mt-2">
+              <div className="flex flex-col gap-5">
                 <Input
+                  classNames={{
+                    inputWrapper: "bg-white/50 dark:bg-black/50 backdrop-blur-md border border-white/60 dark:border-white/10 h-12 shadow-sm rounded-xl",
+                    input: "text-base font-medium",
+                  }}
                   errorMessage={errors.username}
                   isDisabled={loading}
                   isInvalid={!!errors.username}
-                  label="用户名"
-                  placeholder="请输入用户名"
+                  label="Username"
+                  placeholder="admin"
                   value={form.username}
                   variant="bordered"
                   onChange={(e) =>
@@ -184,10 +189,14 @@ export default function IndexPage() {
                 />
 
                 <Input
+                  classNames={{
+                    inputWrapper: "bg-white/50 dark:bg-black/50 backdrop-blur-md border border-white/60 dark:border-white/10 h-12 shadow-sm rounded-xl",
+                    input: "text-base font-medium tracking-wider",
+                  }}
                   isDisabled={loading}
                   isInvalid={!!errors.password}
-                  label="密码"
-                  placeholder="请输入密码"
+                  label="Password"
+                  placeholder="••••••••"
                   type="password"
                   value={form.password}
                   variant="bordered"
@@ -198,14 +207,12 @@ export default function IndexPage() {
                 />
 
                 <Button
-                  className="mt-2"
-                  color="primary"
+                  className="mt-4 h-12 rounded-xl bg-primary text-white font-bold text-base shadow-[0_8px_16px_rgba(0,122,255,0.3)] transition-transform active:scale-[0.98]"
                   disabled={loading}
                   isLoading={loading}
-                  size="lg"
                   onPress={handleLogin}
                 >
-                  {loading ? (showCaptcha ? "验证中..." : "登录中...") : "登录"}
+                  {loading ? (showCaptcha ? "Verifying..." : "Signing in...") : "Sign In"}
                 </Button>
               </div>
             </CardBody>
@@ -275,6 +282,6 @@ export default function IndexPage() {
           </div>
         )}
       </section>
-    </DefaultLayout>
+    </div>
   );
 }