beautify: loginform
This commit is contained in:
DeathKaioken
parent
18a873ffe3
commit
c1e250bab1
@ -84,43 +84,38 @@ export default function LoginForm() {
|
||||
const isTablet = viewportWidth >= 640 && viewportWidth < 1024
|
||||
const isSmallLaptop = viewportWidth >= 1024 && viewportWidth < 1366
|
||||
|
||||
// Dynamic width & scale
|
||||
// CHANGED: Wider base widths; no transform scaling
|
||||
const formWidth = isMobile
|
||||
? '98vw'
|
||||
? '94vw'
|
||||
: isTablet
|
||||
? '85vw'
|
||||
? '80vw'
|
||||
: isSmallLaptop
|
||||
? '50vw'
|
||||
: '40vw'
|
||||
? '60vw'
|
||||
: '52vw'
|
||||
|
||||
const formMaxWidth = isMobile
|
||||
? 'none'
|
||||
? '480px'
|
||||
: isTablet
|
||||
? '620px'
|
||||
? '760px'
|
||||
: isSmallLaptop
|
||||
? '660px'
|
||||
: '720px'
|
||||
|
||||
const formScale = (() => {
|
||||
if (isMobile) return 1
|
||||
if (isTablet) return 0.95
|
||||
if (isSmallLaptop) return 0.9
|
||||
if (viewportWidth >= 1366 && viewportWidth < 1680) return 0.85
|
||||
return 0.82
|
||||
})()
|
||||
? '860px'
|
||||
: '980px'
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full flex justify-center items-start relative"
|
||||
className="w-full relative"
|
||||
style={{
|
||||
// Ensure the background fills the viewport height
|
||||
// CHANGED: full-height flex box for perfect vertical centering
|
||||
minHeight: '100vh',
|
||||
// Reduce bottom padding to avoid extra white space
|
||||
paddingTop: isMobile ? '0.75rem' : '4rem',
|
||||
paddingBottom: isMobile ? '1rem' : '1.5rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
// Background remains
|
||||
backgroundImage: 'url(/images/misc/marble_bluegoldwhite_BG.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
backgroundPosition: 'center',
|
||||
// Subtle padding to breathe on mobile
|
||||
padding: isMobile ? '0.75rem' : '1.5rem'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -128,11 +123,9 @@ export default function LoginForm() {
|
||||
style={{
|
||||
width: formWidth,
|
||||
maxWidth: formMaxWidth,
|
||||
minWidth: isMobile ? '0' : '400px',
|
||||
padding: isMobile ? '0.75rem' : '2rem',
|
||||
marginTop: isMobile ? '0.5rem' : undefined,
|
||||
transform: formScale !== 1 ? `scale(${formScale})` : undefined,
|
||||
transformOrigin: 'top center'
|
||||
minWidth: isMobile ? '0' : '420px',
|
||||
// CHANGED: tighter padding; removed transform scaling
|
||||
padding: isMobile ? '1rem' : '2rem',
|
||||
}}
|
||||
>
|
||||
{/* Animated Ball - Desktop Only */}
|
||||
@ -218,33 +211,36 @@ export default function LoginForm() {
|
||||
|
||||
{/* Content */}
|
||||
<div style={{
|
||||
marginTop: isMobile ? '0.5rem' : isTablet ? '1rem' : '1.5rem',
|
||||
marginBottom: isMobile ? '1.5rem' : isTablet ? '1.75rem' : '2rem',
|
||||
// CHANGED: smaller margins; the card is centered now
|
||||
marginTop: isMobile ? '0.25rem' : isTablet ? '0.5rem' : '0.75rem',
|
||||
marginBottom: isMobile ? '1rem' : isTablet ? '1.25rem' : '1.5rem',
|
||||
width: '100%',
|
||||
}}>
|
||||
<h1
|
||||
className="mb-2 text-center text-4xl font-extrabold text-[#0F172A] tracking-tight drop-shadow-lg"
|
||||
className="mb-2 text-center font-extrabold text-[#0F172A] tracking-tight drop-shadow-lg"
|
||||
style={{
|
||||
fontSize: isMobile ? '2rem' : isTablet ? '2.25rem' : undefined,
|
||||
marginTop: isMobile ? '0.5rem' : undefined,
|
||||
// CHANGED: slightly smaller headline on mobile to reduce vertical space
|
||||
fontSize: isMobile ? '1.75rem' : isTablet ? '2rem' : '2.25rem',
|
||||
marginTop: isMobile ? '0.25rem' : undefined,
|
||||
}}
|
||||
>
|
||||
Profit Planet
|
||||
</h1>
|
||||
<p
|
||||
className="mb-8 text-center text-lg text-[#8D6B1D] font-medium"
|
||||
className="mb-6 text-center text-[#8D6B1D] font-medium"
|
||||
style={{
|
||||
fontSize: isMobile ? '0.95rem' : isTablet ? '1rem' : undefined,
|
||||
marginBottom: isMobile ? '1rem' : isTablet ? '1.5rem' : undefined,
|
||||
fontSize: isMobile ? '0.95rem' : isTablet ? '1rem' : '1.05rem',
|
||||
// CHANGED: reduce bottom margin
|
||||
marginBottom: isMobile ? '0.75rem' : isTablet ? '1rem' : '1rem',
|
||||
}}
|
||||
>
|
||||
Welcome back! Login to continue.
|
||||
</p>
|
||||
|
||||
<form
|
||||
className="space-y-7 w-full"
|
||||
className="space-y-6 w-full"
|
||||
style={{
|
||||
gap: isMobile ? '0.75rem' : isTablet ? '1rem' : undefined,
|
||||
gap: isMobile ? '0.75rem' : isTablet ? '0.9rem' : '1rem',
|
||||
}}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
@ -269,8 +265,8 @@ export default function LoginForm() {
|
||||
onChange={handleInputChange}
|
||||
className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
|
||||
style={{
|
||||
fontSize: isMobile ? '0.875rem' : isTablet ? '0.9rem' : undefined,
|
||||
padding: isMobile ? '0.4rem 0.75rem' : isTablet ? '0.5rem 0.875rem' : undefined,
|
||||
fontSize: isMobile ? '0.95rem' : isTablet ? '1rem' : '1rem',
|
||||
padding: isMobile ? '0.5rem 0.75rem' : isTablet ? '0.6rem 0.875rem' : '0.7rem 1rem',
|
||||
}}
|
||||
placeholder="deine@email.com"
|
||||
required
|
||||
@ -299,8 +295,8 @@ export default function LoginForm() {
|
||||
onChange={handleInputChange}
|
||||
className="appearance-none block w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
|
||||
style={{
|
||||
fontSize: isMobile ? '0.875rem' : isTablet ? '0.9rem' : undefined,
|
||||
padding: isMobile ? '0.4rem 2.5rem 0.4rem 0.75rem' : isTablet ? '0.5rem 2.75rem 0.5rem 0.875rem' : '0.75rem 3rem 0.75rem 1rem',
|
||||
fontSize: isMobile ? '0.95rem' : isTablet ? '1rem' : '1rem',
|
||||
padding: isMobile ? '0.5rem 2.5rem 0.5rem 0.75rem' : isTablet ? '0.6rem 2.75rem 0.6rem 0.875rem' : '0.7rem 3rem 0.7rem 1rem',
|
||||
}}
|
||||
placeholder="Dein Passwort"
|
||||
required
|
||||
@ -366,8 +362,8 @@ export default function LoginForm() {
|
||||
: 'bg-gradient-to-r from-[#8D6B1D] via-[#A67C20] to-[#C49225] hover:from-[#7A5E1A] hover:to-[#B8851F] focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2'
|
||||
}`}
|
||||
style={{
|
||||
fontSize: isMobile ? '0.9rem' : isTablet ? '0.95rem' : undefined,
|
||||
padding: isMobile ? '0.6rem 1rem' : isTablet ? '0.7rem 1.25rem' : undefined,
|
||||
fontSize: isMobile ? '0.95rem' : isTablet ? '1rem' : '1rem',
|
||||
padding: isMobile ? '0.7rem 1.1rem' : isTablet ? '0.75rem 1.25rem' : '0.85rem 1.5rem',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
@ -395,9 +391,9 @@ export default function LoginForm() {
|
||||
|
||||
{/* Registration Section */}
|
||||
<div
|
||||
className="mt-10 w-full"
|
||||
className="mt-8 w-full"
|
||||
style={{
|
||||
marginTop: isMobile ? '1rem' : isTablet ? '1.5rem' : undefined,
|
||||
marginTop: isMobile ? '0.75rem' : isTablet ? '1rem' : '1rem',
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
|
||||
@ -42,20 +42,20 @@ export default function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<PageLayout showFooter={false}>
|
||||
<div className="relative w-full flex flex-col min-h-screen">
|
||||
<div className="relative z-10 flex-1 flex items-start justify-center">
|
||||
<PageLayout showFooter={true}>
|
||||
<div
|
||||
className="relative w-full flex flex-col min-h-screen"
|
||||
style={{
|
||||
backgroundImage: 'url(/images/misc/marble_bluegoldwhite_BG.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="relative z-10 flex-1 flex items-center justify-center">
|
||||
<div className="w-full">
|
||||
<LoginForm />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Removed mobile footer to avoid bottom white container */}
|
||||
{/* <div className="relative z-10 md:hidden">
|
||||
<div className="text-center py-4 text-sm text-slate-700">
|
||||
© 2024 Profit Planet. Alle Rechte vorbehalten.
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</PageLayout>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user