Add background

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
-          href={userLink}
+        <p
           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,204 +17,274 @@ 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 (
-    <>
-      <FloatingToTopButton />
+    <div style={{
+      position: "relative",
+      overflowY: "hidden",
+      overflowX: "hidden",
+      minHeight: "100vh",
+    }}>
+      {/* background */}
+      {background && (
+        <div
+          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
-        className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10"
-        key={key}
+        style={{
+          position: "relative",
+          zIndex: 1,
+          minHeight: "100vh",
+        }}
       >
-        <div className={"flex-1 max-w-7xl mx-auto flex items-center"}>
-          <div className="dropdown">
-            <div
-              tabIndex={0}
-              role="button"
-              className="btn btn-ghost btn-circle lg:hidden"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
+        <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"}>
+            <div className="dropdown">
+              <div
+                tabIndex={0}
+                role="button"
+                className="btn btn-ghost btn-circle lg:hidden"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M4 6h16M4 12h16M4 18h7"
-                />
-              </svg>
-            </div>
-            <ul
-              id={"navi_menu"}
-              tabIndex={0}
-              className="menu menu-md dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
-            >
-              <li
-                onClick={() => {
-                  const menu = document.getElementById(
-                    "navi_menu",
-                  ) as HTMLElement;
-                  menu.blur();
-                  navigate("/");
-                }}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M4 6h16M4 12h16M4 18h7"
+                  />
+                </svg>
+              </div>
+              <ul
+                id={"navi_menu"}
+                tabIndex={0}
+                className="menu menu-md dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
               >
-                <a>{t("Home")}</a>
-              </li>
-              <li
-                onClick={() => {
-                  const menu = document.getElementById(
-                    "navi_menu",
-                  ) as HTMLElement;
-                  menu.blur();
-                  navigate("/tags");
-                }}
-              >
-                <a>{t("Tags")}</a>
-              </li>
-              <li>
-                <a
+                <li
                   onClick={() => {
                     const menu = document.getElementById(
                       "navi_menu",
                     ) as HTMLElement;
                     menu.blur();
+                    navigate("/");
+                  }}
+                >
+                  <a>{t("Home")}</a>
+                </li>
+                <li
+                  onClick={() => {
+                    const menu = document.getElementById(
+                      "navi_menu",
+                    ) as HTMLElement;
+                    menu.blur();
+                    navigate("/tags");
+                  }}
+                >
+                  <a>{t("Tags")}</a>
+                </li>
+                <li>
+                  <a
+                    onClick={() => {
+                      const menu = document.getElementById(
+                        "navi_menu",
+                      ) as HTMLElement;
+                      menu.blur();
+                      navigate("/activity");
+                    }}
+                  >
+                    {t("Activity")}
+                  </a>
+                </li>
+                <li
+                  onClick={() => {
+                    const menu = document.getElementById(
+                      "navi_menu",
+                    ) as HTMLElement;
+                    menu.blur();
+                    navigate("/random");
+                  }}
+                >
+                  <a>{t("Random")}</a>
+                </li>
+                <li
+                  onClick={() => {
+                    const menu = document.getElementById(
+                      "navi_menu",
+                    ) as HTMLElement;
+                    menu.blur();
+                    navigate("/about");
+                  }}
+                >
+                  <a>{t("About")}</a>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <button
+                className="btn btn-ghost text-xl"
+                onClick={() => {
+                  appContext.clear();
+                  navigate(`/`, { replace: true });
+                }}
+              >
+                {app.appName}
+              </button>
+            </div>
+            <div className="hidden lg:flex">
+              <ul className="menu menu-horizontal px-1">
+                <li
+                  onClick={() => {
+                    navigate("/");
+                  }}
+                >
+                  <a>{t("Home")}</a>
+                </li>
+                <li
+                  onClick={() => {
+                    navigate("/tags");
+                  }}
+                >
+                  <a>{t("Tags")}</a>
+                </li>
+                <li
+                  onClick={() => {
+                    navigate("/random");
+                  }}
+                >
+                  <a>{t("Random")}</a>
+                </li>
+                <li
+                  onClick={() => {
                     navigate("/activity");
                   }}
                 >
-                  {t("Activity")}
-                </a>
-              </li>
-              <li
-                onClick={() => {
-                  const menu = document.getElementById(
-                    "navi_menu",
-                  ) as HTMLElement;
-                  menu.blur();
-                  navigate("/random");
-                }}
+                  <a>{t("Activity")}</a>
+                </li>
+                <li
+                  onClick={() => {
+                    navigate("/about");
+                  }}
+                >
+                  <a>{t("About")}</a>
+                </li>
+              </ul>
+            </div>
+            <div className={"flex-1"}></div>
+            <div className="flex gap-2">
+              <SearchBar />
+              <UploadingSideBar />
+              <ThemeSwitcher />
+              <a
+                className={"hidden sm:inline"}
+                href="https://github.com/wgh136/nysoure"
+                target="_blank"
+                rel="noopener noreferrer"
               >
-                <a>{t("Random")}</a>
-              </li>
-              <li
-                onClick={() => {
-                  const menu = document.getElementById(
-                    "navi_menu",
-                  ) as HTMLElement;
-                  menu.blur();
-                  navigate("/about");
-                }}
-              >
-                <a>{t("About")}</a>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <button
-              className="btn btn-ghost text-xl"
-              onClick={() => {
-                appContext.clear();
-                navigate(`/`, { replace: true });
-              }}
-            >
-              {app.appName}
-            </button>
-          </div>
-          <div className="hidden lg:flex">
-            <ul className="menu menu-horizontal px-1">
-              <li
-                onClick={() => {
-                  navigate("/");
-                }}
-              >
-                <a>{t("Home")}</a>
-              </li>
-              <li
-                onClick={() => {
-                  navigate("/tags");
-                }}
-              >
-                <a>{t("Tags")}</a>
-              </li>
-              <li
-                onClick={() => {
-                  navigate("/random");
-                }}
-              >
-                <a>{t("Random")}</a>
-              </li>
-              <li
-                onClick={() => {
-                  navigate("/activity");
-                }}
-              >
-                <a>{t("Activity")}</a>
-              </li>
-              <li
-                onClick={() => {
-                  navigate("/about");
-                }}
-              >
-                <a>{t("About")}</a>
-              </li>
-            </ul>
-          </div>
-          <div className={"flex-1"}></div>
-          <div className="flex gap-2">
-            <SearchBar />
-            <UploadingSideBar />
-            <ThemeSwitcher />
-            <a
-              className={"hidden sm:inline"}
-              href="https://github.com/wgh136/nysoure"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <button className={"btn btn-circle btn-ghost"}>
-                <IoLogoGithub size={24} />
-              </button>
-            </a>
-            {app.isLoggedIn() ? (
-              <UserButton />
-            ) : (
-              <button
-                className={"btn btn-primary btn-square btn-soft"}
-                onClick={() => {
-                  navigate("/login");
-                }}
-              >
-                <MdOutlinePerson size={24}></MdOutlinePerson>
-              </button>
-            )}
+                <button className={"btn btn-circle btn-ghost"}>
+                  <IoLogoGithub size={24} />
+                </button>
+              </a>
+              {app.isLoggedIn() ? (
+                <UserButton />
+              ) : (
+                <button
+                  className={"btn btn-primary btn-square btn-soft"}
+                  onClick={() => {
+                    navigate("/login");
+                  }}
+                >
+                  <MdOutlinePerson size={24}></MdOutlinePerson>
+                </button>
+              )}
+            </div>
           </div>
         </div>
+        <navigatorContext.Provider value={naviContext}>
+          <div className={"max-w-7xl mx-auto pt-16"}>{outlet}</div>
+        </navigatorContext.Provider>
       </div>
-      <navigatorContext.Provider value={naviContext}>
-        <div className={"max-w-7xl mx-auto pt-16"}>{outlet}</div>
-      </navigatorContext.Provider>
-    </>
+    </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>