sosokker/SOS12
1
0
Fork 0
mirror of https://github.com/Sosokker/SOS12.git synced 2025-12-19 12:44:05 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

change color

Browse Source
This commit is contained in:
Yanatchara JERAJA 2023-06-28 14:09:33 +07:00
parent 0c0143dd1c
commit 21b8e7f566
1 changed files with 139 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
src/App.jsx
View File

@ -13,19 +13,19 @@ import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
import { createTheme, ThemeProvider } from '@mui/material/styles'; import {createTheme, ThemeProvider} from '@mui/material/styles';
function Copyright() { function Copyright() {
return ( return (
<Typography variant="body2" color="text.secondary" align="center"> <Typography variant="body2" color="#5585A4" align="center">
{'Copyright © '} {'Copyright © '}
<Link color="inherit" href="https://mui.com/"> <Link color="inherit" href="https://mui.com/">
Your Website Your Website
</Link>{' '} </Link>{' '}
{new Date().getFullYear()} {new Date().getFullYear()}
{'.'} {'.'}
</Typography> </Typography>
); );
} }
const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
@ -33,105 +33,136 @@ const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const defaultTheme = createTheme(); const defaultTheme = createTheme();
export default function App() { export default function App() {
return ( return (
<ThemeProvider theme={defaultTheme}> <ThemeProvider theme={defaultTheme}>
<CssBaseline /> <CssBaseline/>
<AppBar position="relative"> <AppBar position="relative"
<Toolbar>
<Typography variant="h6" color="inherit" noWrap>
Album layout
</Typography>
</Toolbar>
</AppBar>
<main>
{/* Hero unit */}
<Box
sx={{
bgcolor: 'background.paper',
pt: 8,
pb: 6,
}}
>
<Container maxWidth="sm">
<Typography
component="h1"
variant="h2"
align="center"
color="text.primary"
gutterBottom
>
SOS12
</Typography>
<Typography variant="h5" align="center" color="text.secondary" paragraph>
Something short and leading about the collection below—its contents,
the creator, etc. Make it short and sweet, but not too short so folks
don&apos;t simply skip over it entirely.
</Typography>
<Stack
sx={{ pt: 4 }}
direction="row"
spacing={2}
justifyContent="center"
>
<Button variant="contained">Main call to action</Button>
<Button variant="outlined">Secondary action</Button>
</Stack>
</Container>
</Box>
<Container sx={{ py: 8 }} maxWidth="md">
{/* End hero unit */}
<Grid container spacing={4}>
{/*# TODO:Edit the Jode here */}
{cards.map((card) => (
<Grid item key={card} xs={12} sm={6} md={4}>
<Card
sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
>
<CardMedia
component="div"
sx={{ sx={{
// 16:9 bgcolor: '#161E29',
pt: '56.25%',
}} }}
image="https://source.unsplash.com/random?wallpapers" >
/> <Toolbar>
<CardContent sx={{ flexGrow: 1 }}> <Typography variant="h6" color="inherit" noWrap>
<Typography gutterBottom variant="h5" component="h2"> Album layout
Jode1
</Typography> </Typography>
<Typography> </Toolbar>
This is a media card. You can use this section to describe the </AppBar>
content. <main>
</Typography> {/* Hero unit */}
</CardContent> <Box
<CardActions> sx={{
<Button size="small">View</Button> bgcolor: '#0A0E1A',
<Button size="small">Edit</Button> pt: 8,
</CardActions> pb: 6,
</Card> }}
</Grid> >
))} <Container maxWidth="sm">
<Typography
component="h1"
variant="h2"
align="center"
color="#7DD6F6"
gutterBottom
>
SOS12
</Typography>
<Typography variant="h5" align="center" color="aliceblue" paragraph>
Something short and leading about the collection below—its contents,
the creator, etc. Make it short and sweet, but not too short so folks
don&apos;t simply skip over it entirely.
</Typography>
<Stack
sx={{pt: 4}}
direction="row"
spacing={2}
justifyContent="center"
>
<Button variant="contained"
sx={{
bgcolor: '#5585A4',
":hover": {
bgcolor: '#69ACCD',
}
}}
>Main call to action</Button>
<Button variant="outlined"
sx={{
color: '#69ACCD',
borderColor: '#69ACCD',
":hover": {
borderColor: 'aliceblue',
}
}}
>Secondary action</Button>
</Stack>
</Container>
</Box>
<Container
sx={{
py: 8,
bgcolor: '#0A0E1A',
}} maxWidth="fit-content">
{/* End hero unit */}
<Grid container spacing={4}>
</Grid> {/*# TODO:Edit the Jode here */}
</Container> {cards.map((card) => (
</main> <Grid item key={card} xs={12} sm={6} md={4}>
{/* Footer */} <Card
<Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer"> sx={{
<Typography variant="h6" align="center" gutterBottom> height: '100%',
Footer display: 'flex',
</Typography> flexDirection: 'column',
<Typography bgcolor: '#2B3E52'
variant="subtitle1" }}
align="center" >
color="text.secondary" <CardMedia
component="p" component="div"
> sx={{
Something here to give the footer a purpose! // 16:9
</Typography> pt: '56.25%',
<Copyright /> }}
</Box> image="https://source.unsplash.com/random?wallpapers"
{/* End footer */} />
</ThemeProvider> <CardContent sx={{flexGrow: 1}}>
); <Typography gutterBottom variant="h5" component="h2"
color="#7DD6F6">
Jode1
</Typography>
<Typography color="aliceblue">
This is a media card. You can use this section to
describe the
content.
</Typography>
</CardContent>
<CardActions>
<Button size="small" sx={{color: "#69ACCD"}}>View</Button>
<Button size="small">Edit</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Container>
</main>
{/* Footer */}
<Box sx={{bgcolor: '#161E29', p: 6}} component="footer">
<Typography variant="h6" align="center" gutterBottom
sx={{color: "aliceblue"}}>
Footer
</Typography>
<Typography
variant="subtitle1"
align="center"
color="aliceblue"
component="p"
>
Something here to give the footer a purpose!
</Typography>
<Copyright/>
</Box>
{/* End footer */}
</ThemeProvider>
);
} }