diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Creating.css b/pkgs/clan-app/ui/src/routes/Onboarding/Creating.css new file mode 100644 index 000000000..b2e429019 --- /dev/null +++ b/pkgs/clan-app/ui/src/routes/Onboarding/Creating.css @@ -0,0 +1,663 @@ +div.creating { + @apply flex flex-col items-center justify-center; + + div.scene { + width: 400px; + height: 400px; + perspective: 1000px; + /*background: red;*/ + + & > .frame { + position: relative; + top: 100px; + left: 65px; + width: 200px; + height: 200px; + /*background: green;*/ + + /*transform: rotate3d(-2, -2, 1, 45deg);*/ + transform: rotate3d(-1.5, -2, 0.5, 45deg); + transform-style: preserve-3d; + + & > .cube { + position: absolute; + top: 0; + left: 0; + width: 200px; + height: 200px; + transform-style: preserve-3d; + + .cube-face { + position: absolute; + width: 100px; + height: 100px; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.56) 0%, + rgba(255, 255, 255, 0) 100% + ); + border: 1px #10191a solid; + + opacity: 1; + + &.front { + transform: rotateY(0deg) translateZ(50px); + } + + &.right { + transform: rotateY(90deg) translateZ(50px); + } + + &.back { + transform: rotateY(180deg) translateZ(50px); + } + + &.left { + transform: rotateY(-90deg) translateZ(50px); + } + + &.top { + transform: rotateX(90deg) translateZ(50px); + } + + &.bottom { + transform: rotateX(-90deg) translateZ(50px); + } + } + + &.state-1 { + animation: anim-cube-1-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + + &.state-1-1 { + transform: translateZ(-120px); + animation: anim-cube-1-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + + &.state-2 { + left: 120px; + animation: anim-cube-2-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + + &.state-2-2 { + left: 120px; + transform: translateZ(-120px); + animation: anim-cube-2-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + + &.state-3 { + top: 120px; + animation: anim-cube-3-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + + &.state-3-3 { + top: 120px; + transform: translateZ(-120px); + animation: anim-cube-3-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + + &.state-4 { + top: 120px; + left: 120px; + animation: anim-cube-4-1 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + + &.state-4-4 { + top: 120px; + left: 120px; + transform: translateZ(-120px); + animation: anim-cube-4-2 8s 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) + infinite; + } + } + } + } +} + +@keyframes anim-cube-1-1 { + /* STEP 1 */ + 0% { + left: 0px; + transform: translateZ(0px); + } + 2.083% { + left: -40px; + transform: translateZ(0px); + } + + 16.666% { + left: -40px; + transform: translateZ(0px); + } + + /* STEP 2 */ + 18.749% { + left: 0; + transform: translateZ(0px); + } + + 33.332% { + left: 0; + transform: translateZ(0px); + } + + /* STEP 3 */ + 35.415% { + left: 0; + transform: translateZ(40px); + } + + 49.998% { + left: 0; + transform: translateZ(40px); + } + + /* STEP 4 */ + 52.081% { + left: 0; + transform: translateZ(0); + } + + 66.664% { + left: 0; + transform: translateZ(0); + } + + /* Step 5 */ + 68.747% { + left: -60px; + transform: translateZ(60px); + } + 83.33% { + left: -60px; + transform: translateZ(60px); + } + + /* Step 6 */ + 85.413% { + left: 0px; + transform: translateZ(0px); + } + 100% { + left: 0px; + transform: translateZ(0px); + } +} + +@keyframes anim-cube-2-1 { + /* STEP 1 */ + 0% { + left: 120px; + transform: translateZ(0px); + } + 2.083% { + left: 180px; + transform: translateZ(0px); + } + + 16.666% { + left: 180px; + transform: translateZ(0px); + } + + /* STEP 2 */ + 18.749% { + left: 120px; + transform: translateZ(0px); + } + + 33.332% { + left: 120px; + transform: translateZ(0px); + } + + /* STEP 3 */ + 35.415% { + left: 240px; + transform: translateZ(120px); + } + + 49.998% { + left: 240px; + transform: translateZ(120px); + } + + /* STEP 4 */ + 52.081% { + left: 120px; + transform: translateZ(0); + } + + 66.664% { + left: 120px; + transform: translateZ(0); + } + + /* Step 5 */ + 68.747% { + left: 60px; + transform: translateZ(60px); + } + 83.33% { + left: 60px; + transform: translateZ(60px); + } + + /* Step 6 */ + 85.413% { + left: 120px; + transform: translateZ(0px); + } + 100% { + left: 120px; + transform: translateZ(0px); + } +} + +@keyframes anim-cube-3-1 { + /* STEP 1 */ + 0% { + top: 120px; + transform: translateZ(0px); + } + 2.083% { + top: 220px; + transform: translateZ(0px); + } + + 16.666% { + top: 220px; + transform: translateZ(0px); + } + + /* STEP 2 */ + 18.749% { + top: 120px; + transform: translateZ(0px); + } + + 33.332% { + top: 120px; + transform: translateZ(0px); + } + + /* STEP 3 */ + 35.415% { + top: 120px; + transform: translateZ(40px); + } + + 49.998% { + top: 120px; + transform: translateZ(40px); + } + + /* STEP 4 */ + 52.081% { + top: 120px; + transform: translateZ(0); + } + + 66.664% { + top: 120px; + transform: translateZ(0); + } + + /* Step 5 */ + 68.747% { + top: 180px; + transform: translateZ(80px); + } + 83.33% { + top: 180px; + transform: translateZ(80px); + } + + /* Step 6 */ + 85.413% { + top: 120px; + transform: translateZ(0px); + } + 100% { + top: 120px; + transform: translateZ(0px); + } +} + +@keyframes anim-cube-4-1 { + /* STEP 1 */ + 0% { + top: 120px; + left: 120px; + transform: translateZ(0px); + } + 2.083% { + top: 220px; + left: 180px; + transform: translateZ(0px); + } + 16.666% { + top: 220px; + left: 180px; + transform: translateZ(0px); + } + /* STEP 2 */ + 18.749% { + top: 120px; + left: 120px; + transform: translateZ(0px); + } + 33.332% { + top: 120px; + left: 120px; + transform: translateZ(0px); + } + /* STEP 3 */ + 35.415% { + top: 120px; + left: 240px; + transform: translateZ(120px); + } + 49.998% { + top: 120px; + left: 240px; + transform: translateZ(120px); + } + /* STEP 4 */ + 52.081% { + top: 120px; + left: 120px; + transform: translateZ(0); + } + 66.664% { + top: 120px; + left: 120px; + transform: translateZ(0); + } + /* Step 5 */ + 68.747% { + top: 180px; + left: 260px; + transform: translateZ(80px); + } + 83.33% { + top: 180px; + left: 260px; + transform: translateZ(80px); + } + /* Step 6 */ + 85.413% { + top: 120px; + left: 120px; + transform: translateZ(0px); + } + 100% { + top: 120px; + left: 120px; + transform: translateZ(0px); + } +} + +@keyframes anim-cube-1-2 { + /* STEP 1 */ + 0% { + left: 0px; + transform: translateZ(-120px); + } + 2.083% { + left: -40px; + transform: translateZ(-120px); + } + 16.666% { + left: -40px; + transform: translateZ(-120px); + } + /* STEP 2 */ + 18.749% { + left: 0px; + transform: translateZ(-120px); + } + 33.332% { + left: 0px; + transform: translateZ(-120px); + } + /* STEP 3 */ + 35.415% { + left: 0px; + transform: translateZ(-200px); + } + 49.998% { + left: 0px; + transform: translateZ(-200px); + } + /* STEP 4 */ + 52.081% { + left: 0px; + transform: translateZ(-120px); + } + 66.664% { + left: 0px; + transform: translateZ(-120px); + } + /* Step 5 */ + 68.747% { + left: -60px; + transform: translateZ(-180px); + } + 83.33% { + left: -60px; + transform: translateZ(-180px); + } + /* Step 6 */ + 85.413% { + left: 0px; + transform: translateZ(-120px); + } + 100% { + left: 0px; + transform: translateZ(-120px); + } +} + +@keyframes anim-cube-2-2 { + /* STEP 1 */ + 0% { + left: 120px; + transform: translateZ(-120px); + } + 2.083% { + left: 180px; + transform: translateZ(-120px); + } + 16.666% { + left: 180px; + transform: translateZ(-120px); + } + /* STEP 2 */ + 18.749% { + left: 120px; + transform: translateZ(-120px); + } + 33.332% { + left: 120px; + transform: translateZ(-120px); + } + /* STEP 3 */ + 35.415% { + left: 240px; + transform: translateZ(-200px); + } + 49.998% { + left: 240px; + transform: translateZ(-200px); + } + /* STEP 4 */ + 52.081% { + left: 120px; + transform: translateZ(-120px); + } + 66.664% { + left: 120px; + transform: translateZ(-120px); + } + /* Step 5 */ + 68.747% { + left: 60px; + transform: translateZ(-180px); + } + 83.33% { + left: 60px; + transform: translateZ(-180px); + } + /* Step 6 */ + 85.413% { + left: 120px; + transform: translateZ(-120px); + } + 100% { + left: 120px; + transform: translateZ(-120px); + } +} + +@keyframes anim-cube-3-2 { + /* STEP 1 */ + 0% { + top: 120px; + transform: translateZ(-120px); + } + 2.083% { + top: 220px; + transform: translateZ(-120px); + } + 16.666% { + top: 220px; + transform: translateZ(-120px); + } + /* STEP 2 */ + 18.749% { + top: 120px; + transform: translateZ(-120px); + } + 33.332% { + top: 120px; + transform: translateZ(-120px); + } + /* STEP 3 */ + 35.415% { + top: 120px; + transform: translateZ(-200px); + } + 49.998% { + top: 120px; + transform: translateZ(-200px); + } + /* STEP 4 */ + 52.081% { + top: 120px; + transform: translateZ(-120px); + } + 66.664% { + top: 120px; + transform: translateZ(-120px); + } + /* Step 5 */ + 68.747% { + top: 180px; + transform: translateZ(-180px); + } + 83.33% { + top: 180px; + transform: translateZ(-180px); + } + /* Step 6 */ + 85.413% { + top: 120px; + transform: translateZ(-120px); + } + 100% { + top: 120px; + transform: translateZ(-120px); + } +} + +@keyframes anim-cube-4-2 { + /* STEP 1 */ + 0% { + top: 120px; + left: 120px; + transform: translateZ(-120px); + } + 2.083% { + top: 220px; + left: 180px; + transform: translateZ(-120px); + } + 16.666% { + top: 220px; + left: 180px; + transform: translateZ(-120px); + } + /* STEP 2 */ + 18.749% { + top: 120px; + left: 120px; + transform: translateZ(-120px); + } + 33.332% { + top: 120px; + left: 120px; + transform: translateZ(-120px); + } + /* STEP 3 */ + 35.415% { + top: 120px; + left: 240px; + transform: translateZ(-200px); + } + 49.998% { + top: 120px; + left: 240px; + transform: translateZ(-200px); + } + /* STEP 4 */ + 52.081% { + top: 120px; + left: 120px; + transform: translateZ(-120px); + } + 66.664% { + top: 120px; + left: 120px; + transform: translateZ(-120px); + } + /* Step 5 */ + 68.747% { + top: 180px; + left: 260px; + transform: translateZ(-180px); + } + 83.33% { + top: 180px; + left: 260px; + transform: translateZ(-180px); + } + /* Step 6 */ + 85.413% { + top: 120px; + left: 120px; + transform: translateZ(-120px); + } + 100% { + top: 120px; + left: 120px; + transform: translateZ(-120px); + } +} diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Creating.tsx b/pkgs/clan-app/ui/src/routes/Onboarding/Creating.tsx new file mode 100644 index 000000000..45f3f80a9 --- /dev/null +++ b/pkgs/clan-app/ui/src/routes/Onboarding/Creating.tsx @@ -0,0 +1,90 @@ +import { Tooltip } from "@/src/components/Tooltip/Tooltip"; +import { Typography } from "@/src/components/Typography/Typography"; + +import "./Creating.css"; + +export const Creating = () => ( +
+ }> + + Your Clan is being created + + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+); diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css index 73a8af72b..db1d52344 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css +++ b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css @@ -81,10 +81,5 @@ main#welcome { } } } - - div.creating { - @apply w-[17.0625rem] h-[20.4375rem]; - background: url(./cube.svg) center / cover no-repeat; - } } } diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx index 048980964..0502f70ba 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx +++ b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx @@ -11,7 +11,6 @@ import { RouteSectionProps, useNavigate } from "@solidjs/router"; import "./Onboarding.css"; import { Typography } from "@/src/components/Typography/Typography"; import { Button } from "@/src/components/Button/Button"; -import { Tooltip } from "@/src/components/Tooltip/Tooltip"; import { Alert } from "@/src/components/Alert/Alert"; import { Divider } from "@/src/components/Divider/Divider"; @@ -33,6 +32,7 @@ import { Fieldset } from "@/src/components/Form/Fieldset"; import * as v from "valibot"; import { HostFileInput } from "@/src/components/Form/HostFileInput"; import { callApi } from "@/src/hooks/api"; +import { Creating } from "./Creating"; type State = "welcome" | "setup" | "creating"; @@ -154,21 +154,6 @@ const welcome = (props: { ); }; -const creating = () => ( -
- } - > - - Your Clan is being created - - -
-); - export const Onboarding: Component = (props) => { const navigate = useNavigate(); @@ -372,7 +357,9 @@ export const Onboarding: Component = (props) => { - {creating()} + + + diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/cube.svg b/pkgs/clan-app/ui/src/routes/Onboarding/cube.svg deleted file mode 100644 index 5fe3d5824..000000000 --- a/pkgs/clan-app/ui/src/routes/Onboarding/cube.svg +++ /dev/null @@ -1,316 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -