norman/smugglers-run
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update and polish

Browse Source
This commit is contained in:
StrangeD0s
2026-02-08 17:06:59 +01:00
parent 81a53e441e
commit fcd8cadf43
18 changed files with 915 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/StartScreen.tsx
+56 -30
View File
@@ -9,49 +9,76 @@ interface StartScreenProps {
export default function StartScreen({ onStart }: StartScreenProps) {
return (
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-[#050505] overflow-hidden">
{/* Hintergrund-Deko */}
<div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,_#eab308_0%,_transparent_70%)]" />
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-black overflow-hidden">
<div className="absolute inset-0 pointer-events-none">
<div
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `
radial-gradient(1px 1px at 20px 30px, #fff, 100%, rgba(0,0,0,0)),
radial-gradient(1px 1px at 40px 70px, #fff, 100%, rgba(0,0,0,0)),
radial-gradient(1px 1px at 50px 160px, #ddd, 100%, rgba(0,0,0,0)),
radial-gradient(1px 1px at 90px 40px, #fff, 100%, rgba(0,0,0,0)),
radial-gradient(1px 1px at 130px 80px, #fff, 100%, rgba(0,0,0,0)),
radial-gradient(1px 1px at 160px 120px, #ddd, 100%, rgba(0,0,0,0))
`,
backgroundSize: "200px 200px",
backgroundRepeat: "repeat",
}}
/>
<div className="max-w-2xl w-full mx-4 relative z-10 text-center space-y-8 p-10 border border-yellow-500/20 bg-black/60 backdrop-blur-md rounded-2xl shadow-[0_0_100px_rgba(234,179,8,0.1)]">
<div
className="absolute inset-0 opacity-50"
style={{
backgroundImage: `
radial-gradient(1.5px 1.5px at 100px 150px, #fff, 100%, rgba(0,0,0,0)),
radial-gradient(1.5px 1.5px at 300px 400px, #ddd, 100%, rgba(0,0,0,0)),
radial-gradient(1.5px 1.5px at 500px 100px, #fff, 100%, rgba(0,0,0,0))
`,
backgroundSize: "450px 450px",
backgroundRepeat: "repeat",
}}
/>
</div>
<div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_#eab308_0%,_transparent_70%)]" />
<div className="max-w-2xl w-full mx-4 relative z-10 text-center space-y-8 p-10 border-2 border-yellow-500 rounded-2xl bg-black/80 backdrop-blur-sm shadow-[0_0_50px_rgba(0,0,0,0.5)]">
<div className="space-y-2">
<h1 className="font-starjedi text-6xl text-white">
<h1 className="font-starjedi text-6xl text-yellow-500">
{t.UI.GAME_TITLE}
</h1>
<p className="text-yellow-500/60 font-mono tracking-[0.3em] uppercase text-xs">
<p className="text-yellow-500 font-mono tracking-[0.3em] uppercase text-xs">
{t.START_SCREEN.SUBTITLE}
</p>
</div>
<div className="space-y-4 text-gray-400 font-light leading-relaxed">
<p>
<div className="space-y-6 text-yellow-500 leading-relaxed">
<p className="text-sm tracking-wider font-medium">
{t.START_SCREEN.INTRO_TEXT}
<span className="text-white font-medium">
{" "}
<span className="block mt-1 text-yellow-500 font-black">
{t.START_SCREEN.MISSION_HIGHLIGHT}
</span>
</p>
<ul className="text-sm space-y-2 inline-block text-left border-l-2 border-yellow-500/30 pl-6">
<ul className="text-[10px] space-y-3 inline-block text-left border-l-2 border-yellow-500/50 pl-6 tracking-[0.2em]">
<li>
•{" "}
<strong className="text-yellow-500/80">
{t.START_SCREEN.FEATURE_NAV_TITLE}
</strong>{" "}
{t.START_SCREEN.FEATURE_NAV_DESC}
• <strong>{t.START_SCREEN.FEATURE_NAV_TITLE}</strong>{" "}
<span className="opacity-70">
{t.START_SCREEN.FEATURE_NAV_DESC}
</span>
</li>
<li>
•{" "}
<strong className="text-yellow-500/80">
{t.START_SCREEN.FEATURE_RISK_TITLE}
</strong>{" "}
{t.START_SCREEN.FEATURE_RISK_DESC}
• <strong>{t.START_SCREEN.FEATURE_RISK_TITLE}</strong>{" "}
<span className="opacity-70">
{t.START_SCREEN.FEATURE_RISK_DESC}
</span>
</li>
<li>
•{" "}
<strong className="text-yellow-500/80">
{t.START_SCREEN.FEATURE_COMBAT_TITLE}
</strong>{" "}
{t.START_SCREEN.FEATURE_COMBAT_DESC}
• <strong>{t.START_SCREEN.FEATURE_COMBAT_TITLE}</strong>{" "}
<span className="opacity-70">
{t.START_SCREEN.FEATURE_COMBAT_DESC}
</span>
</li>
</ul>
</div>
@@ -59,13 +86,12 @@ export default function StartScreen({ onStart }: StartScreenProps) {
<div className="pt-6">
<button
onClick={onStart}
className="group relative px-12 py-5 bg-yellow-500 text-black font-black uppercase tracking-[0.2em] transition-all hover:scale-105 hover:shadow-[0_0_40px_rgba(234,179,8,0.4)] overflow-hidden"
className="px-12 py-5 border-2 border-yellow-500 text-yellow-500 font-black uppercase tracking-[0.3em] transition-all hover:bg-yellow-500 hover:text-black active:scale-95 shadow-[0_0_20px_rgba(234,179,8,0.2)]"
>
<span className="relative z-10">{t.UI.START_BUTTON}</span>
<div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity" />
{t.UI.START_BUTTON}
</button>
<p className="mt-4 text-[10px] text-gray-600 uppercase tracking-widest">
<p className="mt-6 text-[9px] text-yellow-500/70 uppercase tracking-[0.3em]">
{t.START_SCREEN.FOOTER_ENGINE}
</p>
</div>