Add background

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@marsidev/react-turnstile": "^1.1.0",
         "@tailwindcss/vite": "^4.1.5",
         "axios": "^1.9.0",
+        "framer-motion": "^12.23.5",
         "i18next": "^25.1.1",
         "i18next-browser-languagedetector": "^8.1.0",
         "masonic": "^4.1.0",
@@ -3371,6 +3372,33 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.5.tgz",
+      "integrity": "sha512-t+6/f2TUowkr1gVuGwVwxR3ZQupCdCZj0mivG8M8CW2kwHPqtSePomECvmto15qoFCwost77O/XuEsq59MLDKw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.5",
+        "motion-utils": "^12.23.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -4939,6 +4967,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.5.tgz",
+      "integrity": "sha512-RrUS4X11w7kIU1COoSVptuYTx1QQ/sViDEI1Yl1zL0nem8UXn3HRcsMrFTCkZSSRLXeVpN540bFP1iS87SicPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.2.tgz",
+      "integrity": "sha512-cIEXlBlXAOUyiAtR0S+QPQUM9L3Diz23Bo+zM420NvSd/oPQJwg6U+rT+WRTpp0rizMsBGQOsAwhWIfglUcZfA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6051,8 +6094,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
+      "license": "0BSD"
-      "optional": true
     },
     "node_modules/turbo-stream": {
       "version": "2.4.0",

frontend/package.json

@@ -18,6 +18,7 @@
     "@marsidev/react-turnstile": "^1.1.0",
     "@tailwindcss/vite": "^4.1.5",
     "axios": "^1.9.0",
+    "framer-motion": "^12.23.5",
     "i18next": "^25.1.1",
     "i18next-browser-languagedetector": "^8.1.0",
     "masonic": "^4.1.0",

frontend/src/components/comment_tile.tsx

@@ -24,7 +24,7 @@ export function CommentTile({
     <a
       href={link}
       className={
-        "block card bg-base-100 p-2 my-3 transition-shadow cursor-pointer" +
+        "block card bg-base-100-tr82 p-2 my-3 transition-shadow cursor-pointer" +
         (!elevation || elevation == "normal"
           ? " shadow-xs hover:shadow"
           : " shadow hover:shadow-md")
@@ -35,8 +35,7 @@ export function CommentTile({
       }}
     >
       <div className={"flex flex-row items-center my-1 mx-1"}>
-        <a
+        <p
-          href={userLink}
           className="flex flex-row items-center avatar cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
@@ -49,7 +48,7 @@ export function CommentTile({
           </span>
           <span className={"w-2"}></span>
           <span className={"text-sm font-bold"}>{comment.user.username}</span>
-        </a>
+        </p>
 
         <div className={"grow"}></div>
         <Badge className={"badge-ghost badge-sm"}>

frontend/src/components/navigator.tsx

@@ -8,6 +8,7 @@ import UploadingSideBar from "./uploading_side_bar.tsx";
 import { ThemeSwitcher } from "./theme_switcher.tsx";
 import { IoLogoGithub } from "react-icons/io";
 import { useAppContext } from "./AppContext.tsx";
+import { AnimatePresence, motion } from "framer-motion";
 
 export default function Navigator() {
   const outlet = useOutlet();
@@ -16,21 +17,86 @@ export default function Navigator() {
 
   const [key, setKey] = useState(0);
 
+  const [background, setBackground] = useState<string | undefined>(undefined);
+
   const appContext = useAppContext();
 
   const [naviContext, _] = useState<NavigatorContext>({
     refresh: () => {
       setKey(key + 1);
     },
+    setBackground: (b: string) => {
+      if (b !== background) {
+        setBackground(b);
+      }
+    },
   });
 
   const { t } = useTranslation();
 
   return (
-    <>
+    <div style={{
-      <FloatingToTopButton />
+      position: "relative",
+      overflowY: "hidden",
+      overflowX: "hidden",
+      minHeight: "100vh",
+    }}>
+      {/* background */}
+      {background && (
         <div
-        className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10"
+          className="background-wrapper"
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -2,
+            filter: "blur(8px)",
+          }}
+        >
+          <AnimatePresence mode="wait">
+            <motion.img
+              key={background}
+              src={background}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.5 }}
+              className="absolute w-full h-full object-cover"
+            />
+          </AnimatePresence>
+        </div>
+      )}
+
+      {/* Background overlay */}
+      {background && (
+        <div
+          className="bg-base-100 opacity-60 dark:opacity-40"
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+          }}
+        />
+      )}
+
+      {/* Content overlay with backdrop blur */}
+      <div
+        style={{
+          position: "relative",
+          zIndex: 1,
+          minHeight: "100vh",
+        }}
+      >
+        <FloatingToTopButton />
+        <div className="z-1 fixed top-0 w-full backdrop-blur h-16"/>
+        <div className="z-2 fixed top-0 w-full h-16 bg-base-100 opacity-80"/>
+        <div
+          className="navbar shadow-sm fixed top-0 z-3 lg:z-10 bg-transparent h-16"
           key={key}
         >
           <div className={"flex-1 max-w-7xl mx-auto flex items-center"}>
@@ -202,18 +268,23 @@ export default function Navigator() {
         <navigatorContext.Provider value={naviContext}>
           <div className={"max-w-7xl mx-auto pt-16"}>{outlet}</div>
         </navigatorContext.Provider>
-    </>
+      </div>
+    </div>
   );
 }
 
 interface NavigatorContext {
   refresh: () => void;
+  setBackground: (background: string) => void;
 }
 
 const navigatorContext = createContext<NavigatorContext>({
   refresh: () => {
     // do nothing
   },
+  setBackground: (_) => {
+    // do nothing
+  },
 });
 
 export function useNavigator() {

frontend/src/components/resource_card.tsx

@@ -20,7 +20,7 @@ export default function ResourceCard({ resource }: { resource: Resource }) {
         navigate(`/resources/${resource.id}`);
       }}
     >
-      <div className={"card shadow hover:shadow-md transition-shadow"}>
+      <div className={"card shadow hover:shadow-md transition-shadow bg-base-100-tr82"}>
         {resource.image != null && (
           <figure>
             <img

frontend/src/index.css

@@ -8,6 +8,7 @@
   prefersdark: false;
   color-scheme: "light dark";
   --color-base-100: oklch(99% 0.014 343.198);
+  --color-base-100-rgb: 255 246 251; /* 99% oklch(343.198) 近似RGB */
   --color-base-200: oklch(97% 0.028 342.258);
   --color-base-300: oklch(84% 0.061 343.231);
   --color-base-content: oklch(0% 0 0);
@@ -40,6 +41,7 @@
 @media (prefers-color-scheme: dark) {
   [data-theme="pink"] {
     --color-base-100: oklch(28% 0.022 277.508);
+    --color-base-100-rgb: 54 34 56; /* 28% oklch(277.508) 近似RGB */
     --color-base-200: oklch(24% 0.02 277.508);
     --color-base-300: oklch(40% 0.153 2.432);
     --color-base-content: oklch(97.747% 0.007 106.545);
@@ -69,6 +71,7 @@
   prefersdark: false;
   color-scheme: "light dark";
   --color-base-100: oklch(98% 0.005 240);
+  --color-base-100-rgb: 245 249 255; /* 98% oklch(240) 近似RGB */
   --color-base-200: oklch(96% 0.01 240);
   --color-base-300: oklch(92% 0.015 240);
   --color-base-content: oklch(20% 0.01 240);
@@ -101,6 +104,7 @@
 @media (prefers-color-scheme: dark) {
   [data-theme="ocean"] {
     --color-base-100: oklch(15% 0.02 240);
+    --color-base-100-rgb: 17 19 38; /* 15% oklch(240) 近似RGB */
     --color-base-200: oklch(12% 0.015 240);
     --color-base-300: oklch(25% 0.03 240);
     --color-base-content: oklch(90% 0.01 240);
@@ -130,6 +134,7 @@
   prefersdark: false;
   color-scheme: "light dark";
   --color-base-100: oklch(98% 0.005 140);
+  --color-base-100-rgb: 241 255 245; /* 98% oklch(140) 近似RGB */
   --color-base-200: oklch(96% 0.01 140);
   --color-base-300: oklch(92% 0.015 140);
   --color-base-content: oklch(20% 0.01 140);
@@ -162,6 +167,7 @@
 @media (prefers-color-scheme: dark) {
   [data-theme="mint"] {
     --color-base-100: oklch(15% 0.02 140);
+    --color-base-100-rgb: 19 38 24; /* 15% oklch(140) 近似RGB */
     --color-base-200: oklch(12% 0.015 140);
     --color-base-300: oklch(25% 0.03 140);
     --color-base-content: oklch(90% 0.01 140);
@@ -191,6 +197,7 @@
   prefersdark: false;
   color-scheme: "light dark";
   --color-base-100: oklch(98% 0.005 50);
+  --color-base-100-rgb: 255 253 241; /* 98% oklch(50) 近似RGB */
   --color-base-200: oklch(96% 0.01 50);
   --color-base-300: oklch(92% 0.015 50);
   --color-base-content: oklch(20% 0.01 50);
@@ -223,6 +230,7 @@
 @media (prefers-color-scheme: dark) {
   [data-theme="glow"] {
     --color-base-100: oklch(15% 0.02 50);
+    --color-base-100-rgb: 38 36 19; /* 15% oklch(50) 近似RGB */
     --color-base-200: oklch(12% 0.015 50);
     --color-base-300: oklch(25% 0.03 50);
     --color-base-content: oklch(90% 0.01 50);
@@ -304,3 +312,7 @@ body {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+
+.bg-base-100-tr82 {
+  background-color: rgb(var(--color-base-100-rgb) / 0.82);
+}

frontend/src/pages/activities_page.tsx

@@ -144,7 +144,7 @@ function ActivityCard({ activity }: { activity: Activity }) {
   return (
     <div
       className={
-        "card shadow m-4 p-4 hover:shadow-md transition-shadow cursor-pointer"
+        "card shadow m-4 p-4 hover:shadow-md transition-shadow cursor-pointer bg-base-100-tr82"
       }
       onClick={() => {
         if (

frontend/src/pages/resource_details_page.tsx

@@ -49,6 +49,7 @@ import { useAppContext } from "../components/AppContext.tsx";
 import { BiLogoSteam } from "react-icons/bi";
 import { CommentTile } from "../components/comment_tile.tsx";
 import { CommentInput } from "../components/comment_input.tsx";
+import { useNavigator } from "../components/navigator.tsx";
 
 export default function ResourcePage() {
   const params = useParams();
@@ -64,6 +65,8 @@ export default function ResourcePage() {
 
   const location = useLocation();
 
+  const navigator = useNavigator();
+
   const reload = useCallback(async () => {
     if (!isNaN(id)) {
       setResource(null);
@@ -97,7 +100,6 @@ export default function ResourcePage() {
           network.getResourceDetails(id).then((res) => {
             if (res.success) {
               setResource(res.data!);
-              document.title = res.data!.title;
             } else {
               showToast({ message: res.message, type: "error" });
             }
@@ -107,6 +109,15 @@ export default function ResourcePage() {
     }
   }, [id, location.state]);
 
+  useEffect(() => {
+    if (resource) {
+      document.title = resource.title;
+      if (resource.images.length > 0) {
+        navigator.setBackground(network.getImageUrl(resource.images[0].id));
+      }
+    }
+  }, [resource])
+
   const navigate = useNavigate();
 
   // 标签页与hash的映射
@@ -195,7 +206,7 @@ export default function ResourcePage() {
                 <a href={l.url} target={"_blank"}>
                   <span
                     className={
-                      "py-1 px-3 inline-flex items-center m-1 border border-base-300 rounded-2xl hover:bg-base-200 transition-colors cursor-pointer select-none"
+                      "py-1 px-3 inline-flex items-center m-1 border border-base-300 bg-base-100 opacity-90 rounded-2xl hover:bg-base-200 transition-colors cursor-pointer select-none"
                     }
                   >
                     {l.url.includes("steampowered.com") ? (
@@ -211,7 +222,9 @@ export default function ResourcePage() {
           </p>
         )}
 
-        <div className="tabs tabs-box my-4 mx-2 p-4">
+        <div className="tabs tabs-box my-4 mx-2 p-4 shadow" style={{
+          backgroundColor: "rgb(var(--color-base-100-rgb) / 0.82)",
+        }}>
           <label className="tab transition-all">
             <input
               type="radio"
@@ -302,11 +315,11 @@ function Tags({ tags }: { tags: Tag[] }) {
     <>
       {Array.from(tagsMap.entries()).map(([type, tags]) => (
         <p key={type} className={"px-4"}>
-          <Badge key={type}>{type == "" ? t("Other") : type}</Badge>
+          <Badge className="shadow-xs" key={type}>{type == "" ? t("Other") : type}</Badge>
           {tags.map((tag) => (
             <Badge
               key={tag.name}
-              className={"m-1 cursor-pointer badge-soft badge-primary"}
+              className={"m-1 cursor-pointer badge-soft badge-primary shadow-xs"}
               onClick={() => {
                 navigate(`/tag/${tag.name}`);
               }}

frontend/src/pages/tags_page.tsx

@@ -65,7 +65,7 @@ export default function TagsPage() {
                   navigate(`/tag/${tag.name}`);
                 }}
                 key={tag.name}
-                className={"m-1 cursor-pointer badge-soft badge-primary"}
+                className={"m-1 cursor-pointer badge-soft badge-primary shadow-xs"}
               >
                 {tag.name +
                   (tag.resources_count > 0 ? ` (${tag.resources_count})` : "")}

frontend/src/pages/user_page.tsx

@@ -332,7 +332,7 @@ function FilesList({
           >
             <div
               className={
-                "card shadow p-4 my-2 hover:shadow-md transition-shadow"
+                "card shadow p-4 my-2 hover:shadow-md transition-shadow bg-base-100-tr82"
               }
             >
               <h4 className={"font-bold pb-2"}>{file!.filename}</h4>