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 | `;
|
---|