mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-05-08 17:48:55 -04:00
Add flashy UI animations and enhance PDF invoice layout
- Adds CSS animations for buttons, cards, icons, and text - Improves homepage with animated elements and interactive effects - Refines PDF export: better notes/totals layout, colors, and spacing - Updates styles for more engaging user experience
This commit is contained in:
@@ -49,6 +49,383 @@
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
/* Flashy Animations */
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text-shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-delayed {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.8s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animate-text-shimmer {
|
||||
animation: text-shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-slow {
|
||||
animation: float-slow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-delayed {
|
||||
animation: float-delayed 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.animation-delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.animation-delay-700 {
|
||||
animation-delay: 700ms;
|
||||
}
|
||||
|
||||
/* Particle Effects */
|
||||
@keyframes particles {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100vh) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 40px rgba(16, 185, 129, 0.6),
|
||||
0 0 60px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%,
|
||||
7%,
|
||||
14%,
|
||||
21%,
|
||||
28%,
|
||||
35%,
|
||||
42%,
|
||||
49%,
|
||||
56%,
|
||||
63%,
|
||||
70%,
|
||||
77%,
|
||||
84%,
|
||||
91%,
|
||||
98%,
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
3.5%,
|
||||
10.5%,
|
||||
17.5%,
|
||||
24.5%,
|
||||
31.5%,
|
||||
38.5%,
|
||||
45.5%,
|
||||
52.5%,
|
||||
59.5%,
|
||||
66.5%,
|
||||
73.5%,
|
||||
80.5%,
|
||||
87.5%,
|
||||
94.5% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-particles {
|
||||
animation: particles 4s linear infinite;
|
||||
}
|
||||
|
||||
.animate-glow-pulse {
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-rainbow {
|
||||
animation: rainbow 3s linear infinite;
|
||||
}
|
||||
|
||||
.animate-wiggle {
|
||||
animation: wiggle 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* Particle Container */
|
||||
.particles-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: particles 4s linear infinite;
|
||||
}
|
||||
|
||||
.particle:nth-child(1) {
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.particle:nth-child(2) {
|
||||
left: 20%;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.particle:nth-child(3) {
|
||||
left: 30%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.particle:nth-child(4) {
|
||||
left: 40%;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
.particle:nth-child(5) {
|
||||
left: 50%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.particle:nth-child(6) {
|
||||
left: 60%;
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
.particle:nth-child(7) {
|
||||
left: 70%;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
.particle:nth-child(8) {
|
||||
left: 80%;
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
.particle:nth-child(9) {
|
||||
left: 90%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
/* Enhanced Button Effects */
|
||||
.btn-flashy {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-flashy:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-flashy::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn-flashy:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Mouse Interaction Effects */
|
||||
@keyframes confetti {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-200px) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1) rotate(180deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes magnetic-pull {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-confetti {
|
||||
animation: confetti 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-sparkle {
|
||||
animation: sparkle 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-magnetic {
|
||||
animation: magnetic-pull 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Cursor Trail Effect */
|
||||
.cursor-trail {
|
||||
position: fixed;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(16, 185, 129, 0.8) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
animation: sparkle 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Interactive Card Effects */
|
||||
.interactive-card {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.interactive-card:hover {
|
||||
transform: translateY(-8px) rotateX(5deg);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.1),
|
||||
0 0 20px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
/* Glitch Effect */
|
||||
@keyframes glitch {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
60% {
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-glitch:hover {
|
||||
animation: glitch 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Neon Glow Effect */
|
||||
.neon-glow {
|
||||
text-shadow:
|
||||
0 0 5px currentColor,
|
||||
0 0 10px currentColor,
|
||||
0 0 15px currentColor,
|
||||
0 0 20px currentColor;
|
||||
}
|
||||
|
||||
.neon-glow:hover {
|
||||
text-shadow:
|
||||
0 0 10px currentColor,
|
||||
0 0 20px currentColor,
|
||||
0 0 30px currentColor,
|
||||
0 0 40px currentColor;
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(0.99 0.003 164.25);
|
||||
|
||||
Reference in New Issue
Block a user