[bc20307] | 1 | import styled, { keyframes } from 'styled-components';
|
---|
| 2 | import LocalParkingIcon from '@mui/icons-material/LocalParking';
|
---|
| 3 | import Button from '@mui/material/Button';
|
---|
| 4 |
|
---|
| 5 | const breath = keyframes`
|
---|
| 6 | 0% {
|
---|
| 7 | opacity: 0.4;
|
---|
| 8 | transform: scale(0.7);
|
---|
| 9 | transform: translate(-50%, -50%);
|
---|
| 10 | }
|
---|
| 11 | 25% {
|
---|
| 12 | opacity: 0.6;
|
---|
| 13 | transform: scale(0.8);
|
---|
| 14 | transform: translate(-50%, -50%);
|
---|
| 15 | }
|
---|
| 16 | 50% {
|
---|
| 17 | opacity: 0.8;
|
---|
| 18 | transform: scale(0.9);
|
---|
| 19 | transform: translate(-50%, -50%);
|
---|
| 20 | }
|
---|
| 21 | 100% {
|
---|
| 22 | opacity: 0.1;
|
---|
| 23 | transform: scale(1.1);
|
---|
| 24 | transform: translate(-50%, -50%);
|
---|
| 25 | }
|
---|
| 26 | `;
|
---|
| 27 |
|
---|
| 28 | const buttonBreath = keyframes`
|
---|
| 29 | 0% {
|
---|
| 30 | transform: scale(0.8) ;
|
---|
| 31 | }
|
---|
| 32 | 25% {
|
---|
| 33 | transform: scale(0.85) ;
|
---|
| 34 | }
|
---|
| 35 | 50% {
|
---|
| 36 | transform: scale(0.9) ;
|
---|
| 37 | }
|
---|
| 38 | 75% {
|
---|
| 39 | transform: scale(0.95) ;
|
---|
| 40 | }
|
---|
| 41 | 100% {
|
---|
| 42 | transform: scale(1) ;
|
---|
| 43 | }
|
---|
| 44 | `;
|
---|
| 45 |
|
---|
| 46 | export const Wrapper = styled.div`
|
---|
| 47 | width: 100%;
|
---|
| 48 | height: calc(100vh - 66px);
|
---|
| 49 | padding: 10px 0;
|
---|
| 50 | position: relative;
|
---|
| 51 | `;
|
---|
| 52 |
|
---|
| 53 | export const ParkingSpace = styled.div`
|
---|
| 54 | width: 50%;
|
---|
| 55 | height: 40vh;
|
---|
| 56 | margin: auto;
|
---|
| 57 | position: relative;
|
---|
| 58 | border: 10px solid white;
|
---|
| 59 | border-bottom: 0;
|
---|
| 60 | `;
|
---|
| 61 |
|
---|
| 62 | export const ParkingIcon = styled(LocalParkingIcon).attrs({
|
---|
| 63 | sx: {
|
---|
| 64 | fontSize: 120,
|
---|
| 65 | },
|
---|
| 66 | })`
|
---|
| 67 | color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 68 | left: 50%;
|
---|
| 69 | top: 50%;
|
---|
| 70 | transform: translate(-50%, -50%);
|
---|
| 71 | position: absolute;
|
---|
| 72 | animation: ${breath} 2s linear infinite normal;
|
---|
| 73 | `;
|
---|
| 74 |
|
---|
| 75 | export const ParkingSpaceHelper = styled.div`
|
---|
| 76 | position: absolute;
|
---|
| 77 | width: 20%;
|
---|
| 78 | border-bottom: 10px solid white;
|
---|
| 79 | `;
|
---|
| 80 |
|
---|
| 81 | export const ArrowsWrapper = styled.div`
|
---|
| 82 | position: absolute;
|
---|
| 83 | width: 100%;
|
---|
| 84 | height: 50vh;
|
---|
| 85 | bottom: 10vh;
|
---|
| 86 | `;
|
---|
| 87 |
|
---|
| 88 | export const CarWrapper = styled.div`
|
---|
| 89 | width: 35%;
|
---|
| 90 | height: 35vh;
|
---|
| 91 | position: absolute;
|
---|
| 92 | bottom: 5vh;
|
---|
| 93 | left: 50%;
|
---|
| 94 | transform: translateX(-50%);
|
---|
| 95 | `;
|
---|
| 96 |
|
---|
| 97 | export const Car = styled.img`
|
---|
| 98 | width: 32%;
|
---|
| 99 | height: 30vh;
|
---|
| 100 | z-index: 1000;
|
---|
| 101 | position: absolute;
|
---|
| 102 | bottom: 5vh;
|
---|
| 103 | left: 34%;
|
---|
| 104 | // transform: transalteX(-50%);
|
---|
| 105 | `;
|
---|
| 106 |
|
---|
| 107 | export const PreviewCar = styled.img`
|
---|
| 108 | width: 35%;
|
---|
| 109 | height: 30vh;
|
---|
| 110 | z-index: 1001;
|
---|
| 111 | `;
|
---|
| 112 |
|
---|
| 113 | export const YouAreParkedButton = styled(Button).attrs((props) => ({
|
---|
| 114 | variant: 'contained',
|
---|
| 115 | size: 'large',
|
---|
| 116 | sx: {
|
---|
| 117 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
| 118 | },
|
---|
| 119 | }))`
|
---|
| 120 | position: absolute;
|
---|
| 121 | left: 20%;
|
---|
| 122 | bottom: 20vh;
|
---|
| 123 | width: fit-content;
|
---|
| 124 | font-size: 25px;
|
---|
| 125 | animation: ${buttonBreath} 2s linear infinite alternate;
|
---|
| 126 | :hover {
|
---|
| 127 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 128 | }
|
---|
| 129 | `;
|
---|