diff --git a/src/components/JamCookingPot.module.css b/src/components/JamCookingPot.module.css new file mode 100644 index 000000000..e26526352 --- /dev/null +++ b/src/components/JamCookingPot.module.css @@ -0,0 +1,69 @@ +.jamPotG1 { + animation: jamPotG1Opacity 600ms linear infinite alternate backwards; +} + +@keyframes jamPotG1Opacity { + 0% { + opacity: 1; + animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); + } + + 23.333333% { + opacity: 0.25; + animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); + } + + 50% { + opacity: 0; + animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); + } + + 78.333333% { + opacity: 0.25; + animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); + } + + 100% { + opacity: 0.99; + } +} + +.jamPotG3Tr { + animation: jamPotG3TrRotate 600ms linear infinite alternate backwards; +} + +@keyframes jamPotG3TrRotate { + 0% { + transform: translate(130.297994px, 50.531002px) rotate(0deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); + } + + 50% { + transform: translate(130.297994px, 50.531002px) rotate(-6.125808deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); + } + + 100% { + transform: translate(130.297994px, 50.531002px) rotate(0deg); + } +} + +.jamPotPath4Tr { + animation: jamPotPath4TrRotate 600ms linear infinite alternate backwards; +} + +@keyframes jamPotPath4TrRotate { + 0% { + transform: translate(17.805756px, 38.861973px) rotate(0deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); + } + + 50% { + transform: translate(17.805756px, 38.861973px) rotate(-3.629421deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); + } + + 100% { + transform: translate(17.805756px, 38.861973px) rotate(0deg); + } +} diff --git a/src/components/JamCookingPot.tsx b/src/components/JamCookingPot.tsx new file mode 100644 index 000000000..e23c96671 --- /dev/null +++ b/src/components/JamCookingPot.tsx @@ -0,0 +1,278 @@ +import { SVGProps } from 'react' +import styles from './JamCookingPot.module.css' + +const JamCookingPot = (props: SVGProps) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) + +export default JamCookingPot diff --git a/src/components/ScheduleProgress.tsx b/src/components/ScheduleProgress.tsx index c8e5f8f0e..14c4f0b74 100644 --- a/src/components/ScheduleProgress.tsx +++ b/src/components/ScheduleProgress.tsx @@ -2,7 +2,7 @@ import * as rb from 'react-bootstrap' import { Trans, useTranslation } from 'react-i18next' import styles from './ScheduleProgress.module.css' import { Schedule } from '../context/ServiceInfoContext' -import Sprite from './Sprite' +import JamCookingPot from './JamCookingPot' const scheduleToSteps = (schedule: Schedule) => { // Example Schedule: @@ -121,7 +121,7 @@ const ScheduleProgress = ({ schedule }: ScheduleProgressProps) => {

{t('scheduler.progress_description')}

- +