Skip to content
Snippets Groups Projects
Commit 2b8e1a5e authored by Maximilian Sjöström's avatar Maximilian Sjöström
Browse files

profile page started with some animations added

parent d7e3a1cf
Branches profilePage
No related tags found
1 merge request!3Profile page
Hide whitespace changes
Inline Side-by-side
theme-costume-app/package-lock.json
+ 8
− 8
View file @ 2b8e1a5e
......@@ -11,7 +11,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
"@mui/material": "^5.15.18",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
......@@ -3480,9 +3480,9 @@
}
},
"node_modules/@mui/core-downloads-tracker": {
"version": "5.15.15",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
"integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
"version": "5.15.18",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.18.tgz",
"integrity": "sha512-/9pVk+Al8qxAjwFUADv4BRZgMpZM4m5E+2Q/20qhVPuIJWqKp4Ie4tGExac6zu93rgPTYVQGgu+1vjiT0E+cEw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
......@@ -3514,13 +3514,13 @@
}
},
"node_modules/@mui/material": {
"version": "5.15.15",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
"integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
"version": "5.15.18",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.18.tgz",
"integrity": "sha512-n+/dsiqux74fFfcRUJjok+ieNQ7+BEk6/OwX9cLcLvriZrZb+/7Y8+Fd2HlUUbn5N0CDurgAHm0VH1DqyJ9HAw==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@mui/base": "5.0.0-beta.40",
"@mui/core-downloads-tracker": "^5.15.15",
"@mui/core-downloads-tracker": "^5.15.18",
"@mui/system": "^5.15.15",
"@mui/types": "^7.2.14",
"@mui/utils": "^5.15.14",
......
theme-costume-app/package.json
+ 1
− 1
View file @ 2b8e1a5e
......@@ -6,7 +6,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
"@mui/material": "^5.15.18",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
......
theme-costume-app/src/App.js
+ 1
− 7
View file @ 2b8e1a5e
......@@ -23,15 +23,9 @@ function App() {
<Router>
<div className="App">
<ResponsiveAppBar />
<Routes>
<Route path="/about" Component={Home} />
</Routes>
<Routes>
<Route exact path="/" Component={Home} />
{/* Route for About page */}
<Route path="/about" Component={About} />
<Route path="/about" Component={About} />
<Route path="/profile" element={<Profile user={user} onSignup={handleSignup}/>} />
<Route path="/about" Component={Home} />
<Route path="/Charts" Component={Charts} />
......
theme-costume-app/src/Profile.js
+ 29
− 31
View file @ 2b8e1a5e
import React from 'react';
import yellowSuit from './assets/suitmeister-gul-kostym.jpg';
import nun from './assets/manlig-nunna.jpg';
import sjuksköterska from './assets/manlig-sjukskoterska.jpg';
import './ProfilePage.css'; // Import the CSS file
const user = [
{ name: 'GÖRAN', email: 'pengarfinns@inte.nu', age: '48', profilePicture: yellowSuit }
];
const products = [
{ name: 'nunna' }
{ name: 'Nunna', picture: nun, price: '29.99' },
{ name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
{ name: 'Nunna', picture: nun, price: '29.99' },
{ name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
{ name: 'Nunna', picture: nun, price: '29.99' },
{ name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
];
const ProfilePage = () => {
......@@ -14,23 +22,31 @@ const ProfilePage = () => {
const currentUser = user[0];
return (
<div>
<div style={styles.profileHeader}>
<img src={currentUser.profilePicture} alt="Profile" style={styles.profilePicture} />
<h1 style={styles.profileName}>Welcome, {currentUser.name}!</h1>
<div className="container">
<div className="header">
<h1 className="headerText">Welcome, {currentUser.name}!</h1>
</div>
<div>
<h2>User Information:</h2>
<p>Name: {currentUser.name}</p>
<p>Email: {currentUser.email}</p>
<p>Age: {currentUser.age}</p>
{/* Add more user information fields as needed */}
<div className="profile">
<img src={currentUser.profilePicture} alt="Profile" className="profilePicture" />
<div className="profileInfo">
<h2>User Information:</h2>
<p>Name: {currentUser.name}</p>
<p>Email: {currentUser.email}</p>
<p>Age: {currentUser.age}</p>
{/* Add more user information fields as needed */}
</div>
</div>
<div>
<h2>Currently Listed Products:</h2>
<ul>
<ul className="productList">
{products.map((product, index) => (
<li key={index}>{product.name}</li>
<li key={index} className="productItem" style={{ animationDelay: `${index * 0.4}s` }}>
<img src={product.picture} alt={product.name} className="productImage"/>
<div className="productInfo">
<h3 className="productName">{product.name}</h3>
<p className="productPrice">Price: ${product.price}</p>
</div>
</li>
))}
</ul>
</div>
......@@ -38,22 +54,4 @@ const ProfilePage = () => {
);
};
const styles = {
profileHeader: {
display: 'flex',
alignItems: 'center',
marginBottom: '20px',
},
profilePicture: {
width: '200px',
height: '200px',
borderRadius: '50%',
margin: '20px',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)',
},
profileName: {
fontSize: '24px',
},
};
export default ProfilePage;
theme-costume-app/src/ProfilePage.css 0 → 100644
+ 159
− 0
View file @ 2b8e1a5e
.container {
font-family: Arial, sans-serif;
background: #f4f4f4;
min-height: 100vh;
padding: 20px;
}
.header {
background: #333;
color: #fff;
padding: 20px;
margin-bottom: 20px;
}
.headerText {
margin: 0;
font-size: 24px;
}
.profile {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.profilePicture {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.profileInfo {
max-width: 500px;
}
.productList {
list-style-type: none;
padding: 0;
margin: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
animation: swing-in-top-fwd 1.1s both;
}
.productItem {
width: 250px;
height: auto;
margin: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow: hidden;
}
.productItem:hover {
animation: shadow-drop-2-center 0.3s both !important;
}
.productImage {
width: 100%;
height: auto;
display: block;
border-radius: 5px 5px 0 0;
}
.productInfo {
padding: 10px;
}
.productName {
margin: 0;
font-size: 18px;
}
.productPrice {
margin: 5px 0;
font-size: 16px;
}
.swing-in-top-fwd {
-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
.shadow-drop-2-center {
-webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
* ----------------------------------------
* animation shadow-drop-2-center
* ----------------------------------------
*/
@-webkit-keyframes shadow-drop-2-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}
}
@keyframes shadow-drop-2-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-box-shadow: 0 0 20px 0px rgba(255, 0, 0, 0.35);
box-shadow: 0 0 20px 0px rgba(255, 0, 0, 0.35);
}
}
\ No newline at end of file
theme-costume-app/src/components/ResponsiveAppBar.js
+ 20
− 14
View file @ 2b8e1a5e
......@@ -27,7 +27,6 @@ const settings = [
{title: 'Logout', link: '/logout'},
];
function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const [anchorElUser, setAnchorElUser] = React.useState(null);
......@@ -35,6 +34,7 @@ function ResponsiveAppBar() {
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};
......@@ -56,7 +56,7 @@ function ResponsiveAppBar() {
variant="h6"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
href="/"
sx={{
mr: 2,
display: { xs: 'none', md: 'flex' },
......@@ -99,7 +99,7 @@ function ResponsiveAppBar() {
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
{pages.map((page) => (
<MenuItem key={page.title} onClick={handleCloseNavMenu} component={Link} to={page.link}>
<Typography textAlign="center">{page.title}</Typography>
</MenuItem>
......@@ -128,14 +128,14 @@ function ResponsiveAppBar() {
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
key={page.title}
component={Link}
to={page.link}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page.title}
</Button>
key={page.title}
component={Link}
to={page.link}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page.title}
</Button>
))}
</Box>
......@@ -162,9 +162,14 @@ function ResponsiveAppBar() {
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting.title} onClick={handleCloseNavMenu} component={Link} to={setting.link}>
<Typography textAlign="center">{setting.title}</Typography>
</MenuItem>
<MenuItem
key={setting.title}
onClick={handleCloseUserMenu}
component={Link}
to={setting.link}
>
<Typography textAlign="center">{setting.title}</Typography>
</MenuItem>
))}
</Menu>
</Box>
......@@ -173,4 +178,5 @@ function ResponsiveAppBar() {
</AppBar>
);
}
export default ResponsiveAppBar;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment