+ Test

Added a test programm to upload images for characters

frontend/src/App.css

@@ -5,17 +5,33 @@ body {
   height: 100vh;
   margin: 0;
   font-family: 'Arial', sans-serif;
-  background-color: #1e1e2f;
   color: #f0f0f5;
+  position: relative;
+}
+
+/* Add this before the body - it creates an overlay */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/src/assets/background.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(8px);
+  z-index: -1;
 }
 
 .container {
   text-align: center;
   margin: 20px;
   padding: 20px;
-  border: 1px solid #333;
+  border: 1px solid rgba(51, 51, 51, 0.8);
   border-radius: 10px;
-  background-color: #2e2e3f;
+  background-color: rgba(46, 46, 63, 0.9);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
 }
 
@@ -23,8 +39,6 @@ body {
   margin: 20px;
 }
 
-
-
 .btn {
   background-color: #764ACB;
   color: #f0f0f5;

frontend/src/App.jsx

@@ -23,7 +23,7 @@ function App() {
 
   return (
     <UserProvider>
-      <meta name="DND Master" content="WoW. A description."/>
+      <meta name="P&P Master" content="WoW. A description."/>
       <Router>
         <div>
         <Helmet>

frontend/src/components/header.css

@@ -0,0 +1,44 @@
+.header {
+  background-color: #2e2e3f;
+  padding: 0.3rem 0;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1200;
+  border-bottom: 1px solid #444;
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 32px;
+}
+
+.navList {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 1rem;
+}
+
+.navItem {
+  margin: 0;
+}
+
+.navLink {
+  color: #fff;
+  font-size: 1.1rem;
+  text-decoration: none;
+  padding: 0.2rem 0.8rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  background-color: #1e1e2f;
+}
+
+.navLink:hover {
+  background-color: #764ACB;
+  color: #fff;
+}

frontend/src/components/header.jsx

@@ -1,61 +1,42 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import './header.css';
 
 const Header = ({ isLoggedIn }) => {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    navigate('/login');
+    window.location.reload();
+  };
+
   return (
-    <header style={styles.header}>
-      <nav style={styles.nav}>
-        <ul style={styles.navList}>
-          <li style={styles.navItem}>
-            <Link to="/" style={styles.navLink}>Home</Link>
+    <header className="header">
+      <nav className="nav">
+        <ul className="navList">
+          <li className="navItem">
+            <Link to="/" className="navLink">Home</Link>
           </li>
           {!isLoggedIn && (
-          <><li style={styles.navItem}>
-              <Link to="/login" style={styles.navLink}>Login</Link>
-            </li><li style={styles.navItem}>
-                <Link to="/register" style={styles.navLink}>Register</Link>
-              </li></>
+            <>
+              <li className="navItem">
+                <Link to="/login" className="navLink">Login</Link>
+              </li>
+              <li className="navItem">
+                <Link to="/register" className="navLink">Register</Link>
+              </li>
+            </>
           )}
           {isLoggedIn && (
-            <li style={styles.navItem}>
-              <Link to="/profile" style={styles.navLink}>Profile</Link>
+            <li className="navItem">
+              <Link to="/profile" className="navLink">Profile</Link>
             </li>
           )}
         </ul>
       </nav>
     </header>
   );
-}
-
-const styles = {
-  header: {
-    backgroundColor: '#333',
-    padding: '10px 0',
-    position: 'fixed',
-    width: '100%',
-    top: 0,
-    left: 0,
-    zIndex: 1000,
-  },
-  nav: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  navList: {
-    listStyle: 'none',
-    display: 'flex',
-    margin: 0,
-    padding: 0,
-  },
-  navItem: {
-    margin: '0 15px',
-  },
-  navLink: {
-    color: '#fff',
-    textDecoration: 'none',
-    fontSize: '16px',
-  }
 };
 
-export default Header;
+export default Header;

frontend/src/pages/home.jsx

@@ -27,7 +27,7 @@ function Home({ isLoggedIn, setIsLoggedIn }) {
 
     return (
         <div className="container">
-            <h2>Welcome to DND-Master</h2>
+            <h2>Welcome to P&P-Master</h2>
             {!isLoggedIn ? (
                 <div className="button-group">
                     <button className="btn" onClick={() => navigate('/login')}>Login</button>

frontend/src/pages/profile.jsx

@@ -45,6 +45,7 @@ const Profile = () => {
                   height="200"
                   image={character.Img || defaultCharacterImage}
                   alt={character.CharName}
+                  sx={{ borderRadius: '3px' }}
                 />
                 <CardContent>
                   <Typography variant="h6" component="div" sx={{ color: '#fff', mb: 1 }}>