Claude
526160721a
Address review: the SVG footer badge rendered too small, and the default hero should feature the Runic Gateway emblem rather than the moon. - Footer: drop powered-by.svg; render the emblem PNG beside a "Powered by Runic Gateway" label (left-justified, info text stays centered). - Default hero: brand.hero (and the client fallbacks) now default to the emblem PNG. The untouched default hero centers the square emblem behind the text as a medallion with a symmetric legibility overlay (per-layer background-size so the overlay stays full-bleed). BRAND_HERO still overrides. - Admin login / player shell / maintenance backgrounds center the emblem as a capped medallion instead of a cropped full-bleed cover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XmHdsbnLzDMAVQkAoTQSBe
74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import MoonDot from '../../components/MoonDot.jsx'
|
|
import { useSite } from '../../contexts/SiteContext.jsx'
|
|
|
|
// Centered card layout shared by the player login / register pages. `subtitle`
|
|
// labels the card; `footer` is optional content under the card (e.g. cross-links).
|
|
export default function PlayerShell({ subtitle, children, footer }) {
|
|
const { siteTitle, heroImage } = useSite()
|
|
const bg = `linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('${heroImage}')`
|
|
return (
|
|
<main
|
|
style={{
|
|
minHeight: '100vh',
|
|
display: 'grid',
|
|
placeItems: 'center',
|
|
padding: '40px 18px',
|
|
overflow: 'hidden',
|
|
backgroundColor: 'var(--bg-deep)',
|
|
backgroundImage: bg,
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'min(60vh, 520px)',
|
|
}}
|
|
>
|
|
<div style={{ width: '100%', maxWidth: 400 }}>
|
|
<div style={{ textAlign: 'center', marginBottom: 26 }}>
|
|
<div style={{ marginBottom: 14 }}>
|
|
<MoonDot size={15} glow={0.55} />
|
|
</div>
|
|
<h1 className="display" style={{ margin: 0, fontSize: '1.7rem', letterSpacing: '0.04em', color: 'var(--head)' }}>
|
|
{siteTitle}
|
|
</h1>
|
|
<p className="sans" style={{ margin: '6px 0 0', color: '#9aa6b4', fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
border: '1px solid var(--line)',
|
|
borderRadius: 12,
|
|
padding: 28,
|
|
background: 'linear-gradient(180deg,rgba(25,34,49,0.92),rgba(20,26,33,0.92))',
|
|
backdropFilter: 'blur(6px)',
|
|
boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
{footer}
|
|
|
|
<p style={{ textAlign: 'center', margin: '20px 0 0' }}>
|
|
<Link to="/" className="sans" style={{ color: 'var(--accent)', fontSize: '0.84rem', textDecoration: 'none' }}>
|
|
← Back to site
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
// Off-screen honeypot styling (matches the admin login): present for bots, never
|
|
// seen or filled by real users. Name must equal the server HONEYPOT_FIELD.
|
|
export const honeypotStyle = {
|
|
position: 'absolute',
|
|
left: '-9999px',
|
|
top: 'auto',
|
|
width: '1px',
|
|
height: '1px',
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
}
|