diff --git a/ui/public/icon.png b/ui/public/icon.png new file mode 100644 index 0000000..4cee136 Binary files /dev/null and b/ui/public/icon.png differ diff --git a/ui/public/logo_white.png b/ui/public/logo_white.png new file mode 100644 index 0000000..b34373b Binary files /dev/null and b/ui/public/logo_white.png differ diff --git a/ui/src/assets/icon.png b/ui/src/assets/icon.png new file mode 100644 index 0000000..4cee136 Binary files /dev/null and b/ui/src/assets/icon.png differ diff --git a/ui/src/components/AnimatedBackground.tsx b/ui/src/components/AnimatedBackground.tsx new file mode 100644 index 0000000..7ec99ee --- /dev/null +++ b/ui/src/components/AnimatedBackground.tsx @@ -0,0 +1,282 @@ +export const AnimatedBackground = () => { + return ( +
+ {/* Horizontal moving logos */} +
+ Xtablo + Xtablo +
+
+ Xtablo + Xtablo +
+
+ Xtablo + Xtablo +
+
+ Xtablo + Xtablo +
+
+ Xtablo +
+ + {/* Diagonal moving logos */} +
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+ + {/* Vertical moving logos */} +
+ Xtablo +
+
+ Xtablo +
+ + {/* Circular moving logos */} +
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+ + {/* Zigzag moving logos */} +
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+ + {/* Spiral moving logos */} +
+ Xtablo +
+
+ Xtablo +
+ + {/* Random floating logos */} +
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+ + {/* Wave pattern logos */} +
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+ + {/* Corner shooters */} +
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+ + {/* Bouncing balls */} +
+ Xtablo +
+
+ Xtablo +
+
+ Xtablo +
+
+ ); +}; diff --git a/ui/src/main.css b/ui/src/main.css index b92b187..e858792 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -22,3 +22,1124 @@ --str-chat__text-low-emphasis-color: #b8b0c0; --str-chat__disabled-color: rgba(155, 143, 165, 0.35); } + +@keyframes gradient-x { + 0%, + 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } +} + +.animate-gradient-x { + animation: gradient-x 15s ease infinite; +} + +@keyframes wave-float { + 0%, + 100% { + transform: translateY(0px) rotate(0deg); + } + 25% { + transform: translateY(-20px) rotate(1deg); + } + 50% { + transform: translateY(-10px) rotate(-1deg); + } + 75% { + transform: translateY(-15px) rotate(0.5deg); + } +} + +@keyframes wave-pulse { + 0%, + 100% { + transform: scale(1) rotateZ(0deg); + opacity: 0.3; + } + 25% { + transform: scale(1.05) rotateZ(1deg); + opacity: 0.4; + } + 50% { + transform: scale(0.95) rotateZ(-1deg); + opacity: 0.5; + } + 75% { + transform: scale(1.02) rotateZ(0.5deg); + opacity: 0.35; + } +} + +.animate-wave-float { + animation: wave-float 8s ease-in-out infinite; +} + +.animate-wave-float-delayed { + animation: wave-float 10s ease-in-out infinite 2s; +} + +.animate-wave-float-slow { + animation: wave-float 12s ease-in-out infinite 4s; +} + +.animate-wave-pulse { + animation: wave-pulse 6s ease-in-out infinite; +} + +.animate-wave-pulse-delayed { + animation: wave-pulse 8s ease-in-out infinite 3s; +} + +.animate-wave-pulse-slow { + animation: wave-pulse 10s ease-in-out infinite 1s; +} + +/* Moving Animations */ +@keyframes move-right-slow { + 0% { + transform: translateX(-100px); + } + 100% { + transform: translateX(calc(100vw + 100px)); + } +} + +@keyframes move-right-medium { + 0% { + transform: translateX(-80px); + } + 100% { + transform: translateX(calc(100vw + 80px)); + } +} + +@keyframes move-right-fast { + 0% { + transform: translateX(-120px); + } + 100% { + transform: translateX(calc(100vw + 120px)); + } +} + +@keyframes move-down-slow { + 0% { + transform: translateY(-100px); + } + 100% { + transform: translateY(calc(100vh + 100px)); + } +} + +@keyframes move-down-medium { + 0% { + transform: translateY(-80px); + } + 100% { + transform: translateY(calc(100vh + 80px)); + } +} + +@keyframes move-diagonal-1 { + 0% { + transform: translate(-100px, -100px); + } + 100% { + transform: translate(calc(100vw + 100px), calc(100vh + 100px)); + } +} + +@keyframes move-diagonal-2 { + 0% { + transform: translate(-80px, -50px); + } + 100% { + transform: translate(calc(100vw + 80px), calc(100vh + 50px)); + } +} + +@keyframes move-diagonal-3 { + 0% { + transform: translate(-60px, -80px); + } + 100% { + transform: translate(calc(100vw + 60px), calc(100vh + 80px)); + } +} + +@keyframes orbit-1 { + 0% { + transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg) translateX(150px) + rotate(-360deg); + } +} + +@keyframes orbit-2 { + 0% { + transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(-360deg) translateX(200px) + rotate(360deg); + } +} + +@keyframes orbit-3 { + 0% { + transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg) translateX(100px) + rotate(-360deg); + } +} + +/* Gentle Animations */ +@keyframes spin-slow { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes spin-reverse { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} + +@keyframes bounce-gentle { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes bounce-soft { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-8px); + } +} + +@keyframes pulse-gentle { + 0%, + 100% { + transform: scale(1); + opacity: 0.4; + } + 50% { + transform: scale(1.1); + opacity: 0.6; + } +} + +@keyframes wiggle { + 0%, + 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(3deg); + } + 75% { + transform: rotate(-3deg); + } +} + +@keyframes float-gentle { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + } +} + +@keyframes scale-gentle { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +@keyframes rotate-gentle { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(180deg); + } +} + +@keyframes sway { + 0%, + 100% { + transform: translateX(0px); + } + 50% { + transform: translateX(10px); + } +} + +/* Animation Classes */ +.animate-move-right-slow { + animation: move-right-slow 25s linear infinite; +} +.animate-move-right-medium { + animation: move-right-medium 20s linear infinite; +} +.animate-move-right-fast { + animation: move-right-fast 15s linear infinite; +} +.animate-move-down-slow { + animation: move-down-slow 30s linear infinite; +} +.animate-move-down-medium { + animation: move-down-medium 25s linear infinite; +} +.animate-move-diagonal-1 { + animation: move-diagonal-1 35s linear infinite; +} +.animate-move-diagonal-2 { + animation: move-diagonal-2 28s linear infinite; +} +.animate-move-diagonal-3 { + animation: move-diagonal-3 32s linear infinite; +} +.animate-orbit-1 { + animation: orbit-1 20s linear infinite; +} +.animate-orbit-2 { + animation: orbit-2 25s linear infinite reverse; +} +.animate-orbit-3 { + animation: orbit-3 15s linear infinite; +} +.animate-spin-slow { + animation: spin-slow 8s linear infinite; +} +.animate-spin-reverse { + animation: spin-reverse 6s linear infinite; +} +.animate-bounce-gentle { + animation: bounce-gentle 3s ease-in-out infinite; +} +.animate-bounce-soft { + animation: bounce-soft 4s ease-in-out infinite; +} +.animate-pulse-gentle { + animation: pulse-gentle 4s ease-in-out infinite; +} +.animate-wiggle { + animation: wiggle 2s ease-in-out infinite; +} +.animate-float-gentle { + animation: float-gentle 5s ease-in-out infinite; +} +.animate-scale-gentle { + animation: scale-gentle 6s ease-in-out infinite; +} +.animate-rotate-gentle { + animation: rotate-gentle 8s ease-in-out infinite; +} +.animate-sway { + animation: sway 3s ease-in-out infinite; +} + +/* Enhanced Animations */ +@keyframes orbit-4 { + 0% { + transform: translate(-50%, -50%) rotate(0deg) translateX(250px) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg) translateX(250px) + rotate(-360deg); + } +} + +@keyframes orbit-5 { + 0% { + transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(-360deg) translateX(120px) + rotate(360deg); + } +} + +@keyframes zigzag-1 { + 0% { + transform: translateX(-100px) translateY(0px); + } + 25% { + transform: translateX(25vw) translateY(-50px); + } + 50% { + transform: translateX(50vw) translateY(50px); + } + 75% { + transform: translateX(75vw) translateY(-30px); + } + 100% { + transform: translateX(calc(100vw + 100px)) translateY(20px); + } +} + +@keyframes zigzag-2 { + 0% { + transform: translateX(-80px) translateY(0px); + } + 20% { + transform: translateX(20vw) translateY(40px); + } + 40% { + transform: translateX(40vw) translateY(-60px); + } + 60% { + transform: translateX(60vw) translateY(30px); + } + 80% { + transform: translateX(80vw) translateY(-40px); + } + 100% { + transform: translateX(calc(100vw + 80px)) translateY(0px); + } +} + +@keyframes zigzag-3 { + 0% { + transform: translateX(-120px) translateY(0px); + } + 16% { + transform: translateX(16vw) translateY(-70px); + } + 33% { + transform: translateX(33vw) translateY(80px); + } + 50% { + transform: translateX(50vw) translateY(-50px); + } + 66% { + transform: translateX(66vw) translateY(60px); + } + 83% { + transform: translateX(83vw) translateY(-40px); + } + 100% { + transform: translateX(calc(100vw + 120px)) translateY(0px); + } +} + +@keyframes spiral-1 { + 0% { + transform: translate(0px, 0px) rotate(0deg) scale(0.5); + } + 25% { + transform: translate(25vw, 25vh) rotate(90deg) scale(1); + } + 50% { + transform: translate(50vw, 50vh) rotate(180deg) scale(1.5); + } + 75% { + transform: translate(75vw, 75vh) rotate(270deg) scale(1); + } + 100% { + transform: translate(100vw, 100vh) rotate(360deg) scale(0.5); + } +} + +@keyframes spiral-2 { + 0% { + transform: translate(0px, 0px) rotate(0deg) scale(1.5); + } + 25% { + transform: translate(-25vw, 25vh) rotate(-90deg) scale(0.8); + } + 50% { + transform: translate(-50vw, 50vh) rotate(-180deg) scale(0.5); + } + 75% { + transform: translate(-75vw, 75vh) rotate(-270deg) scale(1.2); + } + 100% { + transform: translate(-100vw, 100vh) rotate(-360deg) scale(1.5); + } +} + +@keyframes float-random-1 { + 0%, + 100% { + transform: translate(0px, 0px) rotate(0deg); + } + 25% { + transform: translate(50px, -30px) rotate(45deg); + } + 50% { + transform: translate(-30px, 40px) rotate(-30deg); + } + 75% { + transform: translate(40px, 20px) rotate(60deg); + } +} + +@keyframes float-random-2 { + 0%, + 100% { + transform: translate(0px, 0px) rotate(0deg); + } + 20% { + transform: translate(-40px, -50px) rotate(-45deg); + } + 40% { + transform: translate(60px, -20px) rotate(90deg); + } + 60% { + transform: translate(-20px, 60px) rotate(-60deg); + } + 80% { + transform: translate(30px, -40px) rotate(120deg); + } +} + +@keyframes float-random-3 { + 0%, + 100% { + transform: translate(0px, 0px) rotate(0deg); + } + 33% { + transform: translate(70px, 30px) rotate(180deg); + } + 66% { + transform: translate(-50px, -40px) rotate(-90deg); + } +} + +@keyframes float-random-4 { + 0%, + 100% { + transform: translate(0px, 0px) rotate(0deg); + } + 25% { + transform: translate(-60px, 50px) rotate(270deg); + } + 50% { + transform: translate(80px, -30px) rotate(180deg); + } + 75% { + transform: translate(-40px, -60px) rotate(90deg); + } +} + +@keyframes wave-1 { + 0% { + transform: translateX(-100px) translateY(0px); + } + 25% { + transform: translateX(25vw) translateY(-80px); + } + 50% { + transform: translateX(50vw) translateY(0px); + } + 75% { + transform: translateX(75vw) translateY(80px); + } + 100% { + transform: translateX(calc(100vw + 100px)) translateY(0px); + } +} + +@keyframes wave-2 { + 0% { + transform: translateX(-100px) translateY(0px); + } + 20% { + transform: translateX(20vw) translateY(60px); + } + 40% { + transform: translateX(40vw) translateY(-60px); + } + 60% { + transform: translateX(60vw) translateY(60px); + } + 80% { + transform: translateX(80vw) translateY(-60px); + } + 100% { + transform: translateX(calc(100vw + 100px)) translateY(0px); + } +} + +@keyframes wave-3 { + 0% { + transform: translateX(-100px) translateY(0px); + } + 33% { + transform: translateX(33vw) translateY(-100px); + } + 66% { + transform: translateX(66vw) translateY(100px); + } + 100% { + transform: translateX(calc(100vw + 100px)) translateY(0px); + } +} + +@keyframes wave-4 { + 0% { + transform: translateX(-100px) translateY(0px); + } + 16% { + transform: translateX(16vw) translateY(40px); + } + 33% { + transform: translateX(33vw) translateY(-80px); + } + 50% { + transform: translateX(50vw) translateY(40px); + } + 66% { + transform: translateX(66vw) translateY(-80px); + } + 83% { + transform: translateX(83vw) translateY(40px); + } + 100% { + transform: translateX(calc(100vw + 100px)) translateY(0px); + } +} + +@keyframes corner-shoot-1 { + 0% { + transform: translate(0px, 0px) rotate(0deg); + } + 100% { + transform: translate(100vw, 100vh) rotate(720deg); + } +} + +@keyframes corner-shoot-2 { + 0% { + transform: translate(0px, 0px) rotate(0deg); + } + 100% { + transform: translate(-100vw, 100vh) rotate(-720deg); + } +} + +@keyframes corner-shoot-3 { + 0% { + transform: translate(0px, 0px) rotate(0deg); + } + 100% { + transform: translate(100vw, -100vh) rotate(720deg); + } +} + +@keyframes corner-shoot-4 { + 0% { + transform: translate(0px, 0px) rotate(0deg); + } + 100% { + transform: translate(-100vw, -100vh) rotate(-720deg); + } +} + +@keyframes bounce-ball-1 { + 0%, + 100% { + transform: translate(0px, 0px); + } + 25% { + transform: translate(200px, -150px); + } + 50% { + transform: translate(400px, 0px); + } + 75% { + transform: translate(600px, -100px); + } +} + +@keyframes bounce-ball-2 { + 0%, + 100% { + transform: translate(0px, 0px); + } + 33% { + transform: translate(-300px, -200px); + } + 66% { + transform: translate(-600px, 0px); + } +} + +@keyframes bounce-ball-3 { + 0%, + 100% { + transform: translate(0px, 0px); + } + 20% { + transform: translate(150px, -100px); + } + 40% { + transform: translate(300px, 50px); + } + 60% { + transform: translate(150px, -80px); + } + 80% { + transform: translate(-150px, 30px); + } +} + +/* Crazy Animations */ +@keyframes spin-fast { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(720deg); + } +} +@keyframes pulse-fast { + 0%, + 100% { + transform: scale(0.8); + opacity: 0.3; + } + 50% { + transform: scale(1.3); + opacity: 0.8; + } +} +@keyframes wobble { + 0%, + 100% { + transform: rotate(0deg) scale(1); + } + 25% { + transform: rotate(5deg) scale(1.1); + } + 50% { + transform: rotate(-5deg) scale(0.9); + } + 75% { + transform: rotate(3deg) scale(1.05); + } +} +@keyframes shake { + 0%, + 100% { + transform: translateX(0px); + } + 25% { + transform: translateX(-10px); + } + 75% { + transform: translateX(10px); + } +} +@keyframes bounce-crazy { + 0%, + 100% { + transform: translateY(0px) scale(1); + } + 50% { + transform: translateY(-50px) scale(1.2); + } +} +@keyframes spin-wobble { + 0% { + transform: rotate(0deg) scale(1); + } + 25% { + transform: rotate(90deg) scale(1.1); + } + 50% { + transform: rotate(180deg) scale(0.9); + } + 75% { + transform: rotate(270deg) scale(1.05); + } + 100% { + transform: rotate(360deg) scale(1); + } +} +@keyframes flip { + 0% { + transform: rotateY(0deg); + } + 50% { + transform: rotateY(180deg); + } + 100% { + transform: rotateY(360deg); + } +} +@keyframes twirl { + 0% { + transform: rotate(0deg) translateX(0px); + } + 25% { + transform: rotate(90deg) translateX(20px); + } + 50% { + transform: rotate(180deg) translateX(0px); + } + 75% { + transform: rotate(270deg) translateX(-20px); + } + 100% { + transform: rotate(360deg) translateX(0px); + } +} +@keyframes dance { + 0%, + 100% { + transform: translateY(0px) rotate(0deg); + } + 25% { + transform: translateY(-20px) rotate(10deg); + } + 50% { + transform: translateY(10px) rotate(-5deg); + } + 75% { + transform: translateY(-15px) rotate(8deg); + } +} +@keyframes jiggle { + 0%, + 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(2deg) translateX(2px); + } + 50% { + transform: rotate(-2deg) translateX(-2px); + } + 75% { + transform: rotate(1deg) translateX(1px); + } +} +@keyframes vibrate { + 0%, + 100% { + transform: translate(0px, 0px); + } + 25% { + transform: translate(2px, -2px); + } + 50% { + transform: translate(-2px, 2px); + } + 75% { + transform: translate(2px, 2px); + } +} +@keyframes swing { + 0%, + 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(15deg); + } + 75% { + transform: rotate(-15deg); + } +} +@keyframes pendulum { + 0%, + 100% { + transform: rotate(0deg); + } + 50% { + transform: rotate(30deg); + } +} +@keyframes elastic { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.3) rotate(180deg); + } +} +@keyframes rubber { + 0%, + 100% { + transform: scaleX(1) scaleY(1); + } + 25% { + transform: scaleX(1.2) scaleY(0.8); + } + 75% { + transform: scaleX(0.8) scaleY(1.2); + } +} +@keyframes rocket { + 0% { + transform: scale(0.5) rotate(0deg); + } + 100% { + transform: scale(2) rotate(360deg); + } +} +@keyframes comet { + 0% { + transform: scale(1) rotate(0deg); + opacity: 1; + } + 100% { + transform: scale(0.2) rotate(720deg); + opacity: 0.2; + } +} +@keyframes meteor { + 0% { + transform: scale(0.2) rotate(0deg); + opacity: 0.2; + } + 100% { + transform: scale(1.5) rotate(-720deg); + opacity: 1; + } +} +@keyframes blast { + 0%, + 100% { + transform: scale(1) rotate(0deg); + } + 50% { + transform: scale(2) rotate(180deg); + } +} +@keyframes spin-bounce { + 0%, + 100% { + transform: rotate(0deg) translateY(0px); + } + 50% { + transform: rotate(180deg) translateY(-30px); + } +} +@keyframes flip-bounce { + 0%, + 100% { + transform: rotateX(0deg) translateY(0px); + } + 50% { + transform: rotateX(180deg) translateY(-25px); + } +} +@keyframes scale-bounce { + 0%, + 100% { + transform: scale(1) translateY(0px); + } + 50% { + transform: scale(1.5) translateY(-40px); + } +} + +/* New Animation Classes */ +.animate-orbit-4 { + animation: orbit-4 18s linear infinite; +} +.animate-orbit-5 { + animation: orbit-5 22s linear infinite reverse; +} +.animate-zigzag-1 { + animation: zigzag-1 18s linear infinite; +} +.animate-zigzag-2 { + animation: zigzag-2 22s linear infinite; +} +.animate-zigzag-3 { + animation: zigzag-3 16s linear infinite; +} +.animate-spiral-1 { + animation: spiral-1 30s linear infinite; +} +.animate-spiral-2 { + animation: spiral-2 25s linear infinite; +} +.animate-float-random-1 { + animation: float-random-1 8s ease-in-out infinite; +} +.animate-float-random-2 { + animation: float-random-2 10s ease-in-out infinite; +} +.animate-float-random-3 { + animation: float-random-3 12s ease-in-out infinite; +} +.animate-float-random-4 { + animation: float-random-4 9s ease-in-out infinite; +} +.animate-wave-1 { + animation: wave-1 20s linear infinite; +} +.animate-wave-2 { + animation: wave-2 24s linear infinite; +} +.animate-wave-3 { + animation: wave-3 18s linear infinite; +} +.animate-wave-4 { + animation: wave-4 26s linear infinite; +} +.animate-corner-shoot-1 { + animation: corner-shoot-1 15s linear infinite; +} +.animate-corner-shoot-2 { + animation: corner-shoot-2 18s linear infinite; +} +.animate-corner-shoot-3 { + animation: corner-shoot-3 20s linear infinite; +} +.animate-corner-shoot-4 { + animation: corner-shoot-4 16s linear infinite; +} +.animate-bounce-ball-1 { + animation: bounce-ball-1 12s ease-in-out infinite; +} +.animate-bounce-ball-2 { + animation: bounce-ball-2 14s ease-in-out infinite; +} +.animate-bounce-ball-3 { + animation: bounce-ball-3 10s ease-in-out infinite; +} +.animate-spin-fast { + animation: spin-fast 2s linear infinite; +} +.animate-pulse-fast { + animation: pulse-fast 1.5s ease-in-out infinite; +} +.animate-wobble { + animation: wobble 2s ease-in-out infinite; +} +.animate-shake { + animation: shake 0.5s ease-in-out infinite; +} +.animate-bounce-crazy { + animation: bounce-crazy 1s ease-in-out infinite; +} +.animate-spin-wobble { + animation: spin-wobble 4s ease-in-out infinite; +} +.animate-flip { + animation: flip 3s ease-in-out infinite; +} +.animate-twirl { + animation: twirl 5s ease-in-out infinite; +} +.animate-dance { + animation: dance 3s ease-in-out infinite; +} +.animate-jiggle { + animation: jiggle 1s ease-in-out infinite; +} +.animate-vibrate { + animation: vibrate 0.3s ease-in-out infinite; +} +.animate-swing { + animation: swing 4s ease-in-out infinite; +} +.animate-pendulum { + animation: pendulum 6s ease-in-out infinite; +} +.animate-elastic { + animation: elastic 4s ease-in-out infinite; +} +.animate-rubber { + animation: rubber 2s ease-in-out infinite; +} +.animate-rocket { + animation: rocket 8s ease-in-out infinite; +} +.animate-comet { + animation: comet 12s ease-in-out infinite; +} +.animate-meteor { + animation: meteor 10s ease-in-out infinite; +} +.animate-blast { + animation: blast 3s ease-in-out infinite; +} +.animate-spin-bounce { + animation: spin-bounce 4s ease-in-out infinite; +} +.animate-flip-bounce { + animation: flip-bounce 5s ease-in-out infinite; +} +.animate-scale-bounce { + animation: scale-bounce 3s ease-in-out infinite; +} + +/* Animated Border Light */ +@keyframes border-light { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.animate-border-light { + position: relative; + border-radius: 1rem; +} + +.animate-border-light::before { + content: ""; + position: absolute; + inset: -2px; + background: conic-gradient( + from 0deg, + transparent 0deg, + transparent 270deg, + rgba(168, 85, 247, 0.8) 300deg, + rgba(147, 51, 234, 1) 330deg, + rgba(168, 85, 247, 0.8) 360deg, + transparent 30deg, + transparent 360deg + ); + border-radius: inherit; + animation: border-light 3s linear infinite; + z-index: -1; +} + +.animate-border-light::after { + content: ""; + position: absolute; + inset: 2px; + background: inherit; + border-radius: inherit; + z-index: -1; +} diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx index 261cad9..8df9c72 100644 --- a/ui/src/pages/login.tsx +++ b/ui/src/pages/login.tsx @@ -6,6 +6,9 @@ import { useLoginEmail } from "@ui/hooks/auth"; import { Form } from "@ui/ui-library/form"; import { LoginWithGoogle } from "@ui/components/BrandButtons/LoginWithGoogle"; import { Link } from "react-router-dom"; +import { useTheme } from "@ui/contexts/ThemeContext"; +import { SunIcon, MoonIcon, MonitorIcon } from "lucide-react"; +import { AnimatedBackground } from "@ui/components/AnimatedBackground"; export function LoginPage() { const redirectUrl = localStorage.getItem("redirectUrl"); @@ -21,6 +24,32 @@ export function LoginPage() { password: "", }); + // Theme + const { theme, setTheme } = useTheme(); + + const toggleTheme = () => { + if (theme === "light") { + setTheme("dark"); + } else if (theme === "dark") { + setTheme("system"); + } else { + setTheme("light"); + } + }; + + const getThemeIcon = () => { + switch (theme) { + case "light": + return ; + case "dark": + return ; + case "system": + return ; + default: + return ; + } + }; + const onSubmit = (e: React.FormEvent) => { e.preventDefault(); login({ @@ -30,128 +59,155 @@ export function LoginPage() { }; return ( -
+
+
e.stopPropagation()} > -
- - + - -

- Se connecter -

- -
-
- - - - setFormData({ ...formData, email: e.target.value }) - } - required - /> - - - - - - - setFormData({ ...formData, password: e.target.value }) - } - required - /> - - - - - - -
- -
-
-
-
-
- - Ou continuer avec - -
+ + + Retour à l'accueil + + + {/* Theme Toggle */} +
- + {/* Xtablo Icon */} +
+ Xtablo + Xtablo +
-

- Pas encore de compte ?{" "} - - - S'inscrire - - -

+

+ Se connecter à Xtablo +

+ +
+
+ + + + setFormData({ ...formData, email: e.target.value }) + } + required + /> + + + + + + + setFormData({ ...formData, password: e.target.value }) + } + required + /> + + + + {/* */} + + +
+ +
+
+
+
+
+ + Ou continuer avec + +
+
+ + + +

+ Pas encore de compte ?{" "} + + + S'inscrire + + +

+
diff --git a/ui/src/pages/planning.tsx b/ui/src/pages/planning.tsx index 472435a..9338b21 100644 --- a/ui/src/pages/planning.tsx +++ b/ui/src/pages/planning.tsx @@ -766,7 +766,7 @@ export const PlanningPage = () => { - - -
-
-
-
-
- - Ou continuer avec - -
- + {/* Xtablo Icon */} +
+ Xtablo + Xtablo +
-

- Déjà un compte ?{" "} - - - Se connecter - - -

+

+ Créer un compte Xtablo +

+ +
+
+
+ + + + setFormData({ ...formData, first_name: e.target.value }) + } + required + /> + + + + + + setFormData({ ...formData, last_name: e.target.value }) + } + required + /> + + +
+ + {/* + + + setFormData({ ...formData, business_name: e.target.value }) + } + required + /> + + */} + + + + + setFormData({ ...formData, email: e.target.value }) + } + required + /> + + + + + + + setFormData({ ...formData, password: e.target.value }) + } + required + /> + + {!errors.password && ( + + {errors.password} + + )} + + + + + + setFormData({ + ...formData, + confirmPassword: e.target.value, + }) + } + required + /> + + + + + + + + + +
+ +
+
+
+
+
+ + Ou continuer avec + +
+
+ + + +

+ Déjà un compte ?{" "} + + + Se connecter + + +

+