max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Close two gaps against the contact form handoff spec

Browse source 
The redesign itself shipped earlier (78d3d4a, 3079bd2); comparing the
implementation against the README again surfaced two missing details:

- The light-mode backdrop's subtle topo wave lines (five 1px curved
  paths in --kf-topo, top-left, ~360x280) were never implemented.
- The Google Maps embed showed Google's own info overlay in the top-left
  corner behind our "In Maps öffnen" chip. The iframe is now rendered
  taller inside a clipped 210px container with a negative top margin,
  cropping that overlay away while keeping the marker and the required
  bottom attribution visible.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-20 07:10:16 +02:00
parent fa862d936a
commit 999f7c471b
5 changed files with 33 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
hifi-src/src/pages/public/ContactPage.jsx
View file

@ -229,6 +229,21 @@ export default function ContactPage() {
style={{ background: 'radial-gradient(circle, rgba(207,239,90,0.35), transparent 70%)' }} style={{ background: 'radial-gradient(circle, rgba(207,239,90,0.35), transparent 70%)' }}
/> />
</div> </div>
{/* Light Mode: dezente Topo-Wellenlinien oben links (README "Hintergruende"). */}
<svg
aria-hidden="true"
viewBox="0 0 360 280"
className="pointer-events-none absolute left-0 top-0 block h-[280px] w-[360px] opacity-50 dark:hidden"
fill="none"
stroke="var(--kf-topo)"
strokeWidth="1"
>
<path d="M -20 40 C 60 10, 140 70, 220 40 S 360 10, 400 50" />
<path d="M -20 90 C 70 55, 150 115, 230 85 S 370 60, 400 100" />
<path d="M -20 140 C 60 105, 150 165, 235 135 S 365 110, 400 150" />
<path d="M -20 190 C 70 155, 145 215, 230 185 S 370 160, 400 200" />
<path d="M -20 240 C 60 205, 150 265, 235 235 S 365 210, 400 250" />
</svg>
<div className="relative z-10 mx-auto max-w-[1280px] pt-10 sm:pt-14"> <div className="relative z-10 mx-auto max-w-[1280px] pt-10 sm:pt-14">
{/* Hero */} {/* Hero */}
@ -553,15 +568,20 @@ export default function ContactPage() {
</a> </a>
)} )}
<ExternalEmbed name={t('contactPage.mapEmbedName')} className="h-[210px] w-full"> <ExternalEmbed name={t('contactPage.mapEmbedName')} className="h-[210px] w-full">
<iframe {/* iframe hoeher als der sichtbare Ausschnitt + negativer margin-top:
title="HifiPlanet Amorbach – Standort" schneidet Googles eigenes Overlay (oben links) weg, damit nur unser
src={`https://www.google.com/maps?q=${SHOP_ADDRESS_ENCODED}&output=embed`} "In Maps oeffnen"-Chip zu sehen ist - wie im Prototyp. */}
width="100%" <div className="h-[210px] overflow-hidden">
height="210" <iframe
style={{ border: 0, display: 'block' }} title="HifiPlanet Amorbach – Standort"
loading="lazy" src={`https://www.google.com/maps?q=${SHOP_ADDRESS_ENCODED}&output=embed`}
referrerPolicy="no-referrer-when-downgrade" width="100%"
/> height="280"
style={{ border: 0, display: 'block', marginTop: '-70px' }}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</ExternalEmbed> </ExternalEmbed>
<a <a
href={DIRECTIONS_URL} href={DIRECTIONS_URL}

1
hifi/assets/index-CHiguyP-.css
View file

File diff suppressed because one or more lines are too long

1
hifi/assets/index-CTVFMvNc.css Normal file
View file

File diff suppressed because one or more lines are too long

2
hifi/assets/index-DCz9ru6D.js → hifi/assets/index-CVbBNBDp.js
View file

File diff suppressed because one or more lines are too long

4
hifi/index.html
View file

@ -43,9 +43,9 @@
"sameAs": ["https://www.youtube.com/@hifiplanet2812"] "sameAs": ["https://www.youtube.com/@hifiplanet2812"]
} }
</script> </script>
<script type="module" crossorigin src="/assets/index-DCz9ru6D.js"></script> <script type="module" crossorigin src="/assets/index-CVbBNBDp.js"></script>
<link rel="modulepreload" crossorigin href="/assets/lucide-icons-CnpfS6R8.js"> <link rel="modulepreload" crossorigin href="/assets/lucide-icons-CnpfS6R8.js">
<link rel="stylesheet" crossorigin href="/assets/index-CHiguyP-.css"> <link rel="stylesheet" crossorigin href="/assets/index-CTVFMvNc.css">
</head> </head>
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100"> <body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
<div id="root"></div> <div id="root"></div>