Seazn/profit-planet-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautify: loginform Planet Animation

Browse Source
This commit is contained in:
DeathKaioken 2025-10-03 23:14:25 +02:00
parent 69f586aded
commit 4ec041a49f
1 changed files with 68 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/login/components/LoginForm.tsx
View File

@ -119,20 +119,78 @@ export default function LoginForm() {
{/* Animated Ball - Desktop Only */}
{showBall && !isMobile && (
<div className="absolute -top-16 left-1/2 -translate-x-1/2 w-28 z-20">
<div className="w-28 h-28 rounded-full bg-gradient-to-br from-[#8D6B1D] via-[#A67C20] to-[#C49225] flex items-center justify-center shadow-xl border-4 border-white relative">
<svg className="w-20 h-20 text-[#F4E7D1]" viewBox="0 0 64 64" fill="none">
<circle cx="32" cy="32" r="20" fill="currentColor" />
<ellipse cx="32" cy="38" rx="16" ry="5" fill="#8D6B1D" fillOpacity=".10" />
<ellipse cx="32" cy="26" rx="10" ry="4" fill="#8D6B1D" fillOpacity=".08" />
<circle cx="40" cy="26" r="3" fill="#8D6B1D" fillOpacity=".5" />
</svg>
{/* Orbiting balls */}
<div className="w-28 h-28 rounded-full bg-gradient-to-br from-[#8D6B1D] via-[#A67C20] to-[#C49225] shadow-xl border-4 border-white relative">
{/* Inner small circle with cartoony Earth */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-16 h-16 rounded-full bg-white/15 backdrop-blur-sm border border-white/25 flex items-center justify-center shadow-inner relative overflow-hidden">
<svg
viewBox="0 0 64 64"
className="w-14 h-14"
role="img"
aria-label="Cartoon Earth"
>
<defs>
<radialGradient id="earth-ocean" cx="50%" cy="40%" r="65%">
<stop offset="0%" stopColor="#3fa9f5" />
<stop offset="100%" stopColor="#1d5fae" />
</radialGradient>
<linearGradient id="earth-glow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="rgba(255,255,255,0.55)" />
<stop offset="60%" stopColor="rgba(255,255,255,0)" />
</linearGradient>
</defs>
<circle cx="32" cy="32" r="30" fill="url(#earth-ocean)" />
{/* Land masses (stylized) */}
<path
fill="#4caf50"
d="M18 30c4-6 10-9 16-9 3 0 5 1 7 3 2 2 1 4-1 5-4 2-8 2-11 5-2 2-3 4-6 4-5 0-8-5-5-8Z"
/>
<path
fill="#66bb6a"
d="M40 18c3 1 6 3 7 6 1 3 0 5-2 6-2 1-3 0-5-2-3-3-6-5-6-7 0-3 3-4 6-3Z"
opacity=".9"
/>
<path
fill="#43a047"
d="M26 44c2-2 5-3 8-2 2 1 3 3 1 5-2 3-6 5-9 4-3-1-3-5 0-7Z"
opacity=".85"
/>
{/* Atmospheric rim */}
<circle
cx="32"
cy="32"
r="30"
fill="none"
stroke="rgba(255,255,255,0.35)"
strokeWidth="1.5"
/>
{/* Light sheen */}
<ellipse
cx="26"
cy="22"
rx="11"
ry="7"
fill="url(#earth-glow)"
opacity=".6"
/>
</svg>
{/* Subtle gloss overlay */}
<span className="pointer-events-none absolute inset-0 before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_35%_30%,rgba(255,255,255,0.45),transparent_70%)]" />
</div>
</div>
{/* Orbiting balls (unchanged) */}
<span className="absolute left-1/2 top-1/2 w-0 h-0">
<span className="block absolute animate-orbit-1" style={{ width: 0, height: 0 }}>
<span className="block w-3 h-3 bg-[#8D6B1D] rounded-full shadow-lg" style={{ transform: 'translateX(44px)' }}></span>
<span
className="block w-3 h-3 bg-[#8D6B1D] rounded-full shadow-lg"
style={{ transform: 'translateX(44px)' }}
/>
</span>
<span className="block absolute animate-orbit-2" style={{ width: 0, height: 0 }}>
<span className="block w-2.5 h-2.5 bg-[#A67C20] rounded-full shadow-md" style={{ transform: 'translateX(-36px)' }}></span>
<span
className="block w-2.5 h-2.5 bg-[#A67C20] rounded-full shadow-md"
style={{ transform: 'translateX(-36px)' }}
/>
</span>
</span>
</div>