Adjust layout background with image and set opacity

README.md

@@ -61,6 +61,8 @@ A powerful desktop application built with React and Tauri that provides comprehe
 
 ### Backend
 - **Tauri** (Rust-based desktop framework)
+  - Used for cross-platform desktop packaging (Windows, macOS, Linux)
+  - Optional if you only need the web version without desktop integration
 - Tauri API and Plugin Opener
 
 ## 🔧 Development Setup
@@ -92,14 +94,14 @@ pnpm setup
 
 ```bash
 pnpm dev           # Web-only development
-pnpm tauri:dev     # Tauri app development
+pnpm tauri:dev     # Tauri app development (optional if you don't need desktop integration)
 ```
 
 ### Building
 
 ```bash
 pnpm build         # Web build
-pnpm tauri:build   # Tauri app build
+pnpm tauri:build   # Tauri app build (optional for desktop packaging)
 ```
 
 ## 📜 Available Scripts

src/components/github/analysis/tabs/RepoTabs.tsx

@@ -5,97 +5,6 @@ const RepoTabs = () => {
 	return (
 		<Grow in timeout={700}>
 			<Box className="tab-container">
-				{/*<Box*/}
-				{/*	sx={{*/}
-				{/*		padding: "1.75rem",*/}
-				{/*		background:*/}
-				{/*			"linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(249, 250, 251, 0.9))",*/}
-				{/*		borderBottom: "1px solid rgba(0, 0, 0, 0.04)",*/}
-				{/*		position: "relative",*/}
-				{/*		overflow: "hidden",*/}
-				{/*	}}*/}
-				{/*>*/}
-				{/*	<Box*/}
-				{/*		className="shine-effect"*/}
-				{/*		sx={{*/}
-				{/*			display: "flex",*/}
-				{/*			alignItems: "center",*/}
-				{/*			gap: 2,*/}
-				{/*			position: "relative",*/}
-				{/*			zIndex: 2,*/}
-				{/*		}}*/}
-				{/*	>*/}
-				{/*		<Box*/}
-				{/*			sx={{*/}
-				{/*				display: "flex",*/}
-				{/*				alignItems: "center",*/}
-				{/*				justifyContent: "center",*/}
-				{/*				width: 40,*/}
-				{/*				height: 40,*/}
-				{/*				borderRadius: "50%",*/}
-				{/*				background: "linear-gradient(135deg, #3B82F6, #4F46E5)",*/}
-				{/*				boxShadow: "0 4px 6px -1px rgba(59, 130, 246, 0.2)",*/}
-				{/*			}}*/}
-				{/*		>*/}
-				{/*			<GitHubIcon sx={{ color: "white", fontSize: "1.4rem" }} />*/}
-				{/*		</Box>*/}
-				{/*		<Box>*/}
-				{/*			<Typography*/}
-				{/*				className="text-2xl font-bold text-gray-800 mb-1"*/}
-				{/*				variant="h1"*/}
-				{/*				sx={{*/}
-				{/*					fontSize: "1.5rem !important",*/}
-				{/*					fontWeight: "700 !important",*/}
-				{/*					background: "linear-gradient(90deg, #1E40AF, #3B82F6)",*/}
-				{/*					WebkitBackgroundClip: "text",*/}
-				{/*					WebkitTextFillColor: "transparent",*/}
-				{/*					letterSpacing: "-0.01em",*/}
-				{/*				}}*/}
-				{/*			>*/}
-				{/*				GitHub Repository Analysis1*/}
-				{/*			</Typography>*/}
-				{/*			<Typography*/}
-				{/*				className="text-gray-600"*/}
-				{/*				variant="body2"*/}
-				{/*				sx={{*/}
-				{/*					fontSize: "0.95rem",*/}
-				{/*					opacity: 0.85,*/}
-				{/*				}}*/}
-				{/*			>*/}
-				{/*				Analyze single repositories or multiple repositories in batch*/}
-				{/*				mode*/}
-				{/*			</Typography>*/}
-				{/*		</Box>*/}
-				{/*	</Box>*/}
-
-				{/*	/!* 背景装饰元素 *!/*/}
-				{/*	<Box*/}
-				{/*		sx={{*/}
-				{/*			position: "absolute",*/}
-				{/*			top: -20,*/}
-				{/*			right: -20,*/}
-				{/*			width: 120,*/}
-				{/*			height: 120,*/}
-				{/*			borderRadius: "50%",*/}
-				{/*			background:*/}
-				{/*				"radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, rgba(59, 130, 246, 0) 70%)",*/}
-				{/*			zIndex: 1,*/}
-				{/*		}}*/}
-				{/*	/>*/}
-				{/*	<Box*/}
-				{/*		sx={{*/}
-				{/*			position: "absolute",*/}
-				{/*			bottom: -30,*/}
-				{/*			left: -30,*/}
-				{/*			width: 160,*/}
-				{/*			height: 160,*/}
-				{/*			borderRadius: "50%",*/}
-				{/*			background:*/}
-				{/*				"radial-gradient(circle, rgba(79, 70, 229, 0.05) 0%, rgba(79, 70, 229, 0) 70%)",*/}
-				{/*			zIndex: 1,*/}
-				{/*		}}*/}
-				{/*	/>*/}
-				{/*</Box>*/}
 			</Box>
 		</Grow>
 	);

src/components/github/progress/ProgressTracker.tsx

@@ -76,6 +76,7 @@ const ProgressTracker = ({
 							<Typography
 								className="font-semibold text-gray-700"
 								sx={{ cursor: "default" }}
+
 							>
 								Analysis Progress
 							</Typography>

src/components/layout/Root.tsx

@@ -44,13 +44,14 @@ export default function Root(): React.ReactElement {
 		<ThemeProvider theme={theme}>
 			<CssBaseline />
 			<div className="relative min-h-screen flex flex-col">
-				{/* Light static background instead of heavy blur effect */}
+				{/* Background image */}
 				<div
 					className="absolute inset-0 -z-10"
 					style={{
-						background:
-							"linear-gradient(135deg, #f5f7ff 0%, #f0f1fe 40%, #f8f1ff 100%)",
-						opacity: 0.8,
+						backgroundImage: "url('/background.jpg')",
+						backgroundSize: "cover",
+						backgroundPosition: "center",
+						opacity: 0.4,
 					}}
 				/>
 				<main className="flex-grow px-4">
@@ -143,8 +144,8 @@ export default function Root(): React.ReactElement {
 							sx={{ mt: 1, opacity: 0.7 }}
 							variant="body2"
 						>
-							© {new Date().getFullYear()} GitHub Repository Analyzer v0.4.7
-							Created with ❤️ by Jack Qin
+							© {new Date().getFullYear()} GitHub Repository Analyzer v0.5.0
+							Developed by Jack Qin
 						</Typography>
 					</Box>
 				</footer>

src/pages/GitHub.tsx

@@ -45,7 +45,7 @@ export const GitHub = () => {
 						marginBottom: "1rem",
 					}}
 				>
-					v0.4.7
+					v0.5.0
 				</Typography>
 			</Box>
 
@@ -73,7 +73,7 @@ export const GitHub = () => {
 					},
 					position: "relative",
 
-					borderColor: "rgba(255,255,255,0.9)",
+					borderColor: "transparent",
 
 					transition: "all 0.3s ease-in-out",
 				}}

src/styles/FormStyles.css

@@ -267,7 +267,6 @@
   100% { transform: rotate(360deg); }
 }
 
-/* Tab组件样式增强 */
 .tab-container {
   border-radius: 16px;
   overflow: hidden;
@@ -277,7 +276,6 @@
   position: relative;
   z-index: 1;
   transition: all 0.3s ease;
-  border: 1.5px solid rgba(255, 255, 255, 0.5);
 }
 
 .tab-container::after {
@@ -298,103 +296,6 @@
   opacity: 1;
 }
 
-.tab-button {
-  border-radius: 10px !important;
-  margin: 0.25rem !important;
-  padding: 0.75rem 1.25rem !important;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  position: relative;
-  overflow: hidden;
-  text-transform: none !important;
-  color: rgba(55, 65, 81, 0.7) !important;
-}
-
-.tab-button.active {
-  color: #2563EB !important;
-  background-color: rgba(59, 130, 246, 0.08) !important;
-}
-
-.tab-button.active::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  background: linear-gradient(90deg, #3B82F6, #4F46E5);
-  opacity: 1;
-  transform: scaleX(1);
-  transform-origin: left;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.tab-button::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2), transparent 80%);
-  transform: scale(0);
-  opacity: 0;
-  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: -1;
-  border-radius: inherit;
-}
-
-.tab-button:hover::before {
-  transform: scale(1.5);
-  opacity: 0.1;
-}
-
-.tab-button .MuiSvgIcon-root {
-  font-size: 1.25rem !important;
-  margin-right: 0.5rem !important;
-  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  opacity: 0.7;
-}
-
-.tab-button:hover .MuiSvgIcon-root {
-  transform: scale(1.2);
-  opacity: 1;
-}
-
-/* 自定义提示框 */
-.custom-alert {
-  border-radius: 10px !important;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
-  border: none !important;
-  padding: 0.75rem 1rem !important;
-}
-
-.custom-alert.success {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.1)) !important;
-  color: #065F46 !important;
-}
-
-.custom-alert.error {
-  background: linear-gradient(135deg, #f87171, #ef4444) !important;
-  border-left: 4px solid #DC2626 !important;
-  font-weight: 500 !important;
-  box-shadow: 0 4px 8px -1px rgba(220, 38, 38, 0.15), 0 2px 4px -1px rgba(220, 38, 38, 0.1) !important;
-}
-
-/* 响应式适配 */
-@media (max-width: 600px) {
-  .form-card {
-    padding: 1rem !important;
-    border-radius: 12px !important;
-  }
-
-  .submit-button {
-    padding: 8px 16px !important;
-    font-size: 0.875rem !important;
-  }
-}
-
-
-/* 动画效果 */
 @keyframes fadeInUp {
   0% { opacity: 0; transform: translateY(10px); }
   100% { opacity: 1; transform: translateY(0); }
@@ -410,33 +311,3 @@
   100% { opacity: 1; transform: translateX(0); }
 }
 
-/* 微交互的灵感动效 */
-.shine-effect {
-  position: relative;
-  overflow: hidden;
-}
-
-.shine-effect::after {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.3) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  transform: rotate(30deg);
-  opacity: 0;
-  transition: opacity 0.3s;
-  pointer-events: none;
-}
-
-.shine-effect:hover::after {
-  opacity: 1;
-  transition: transform 0.7s, opacity 0.5s;
-  transform: rotate(30deg) translate(100%, -100%);
-}