39ef5f2d83
Review follow-up (Requirements Engineer, Leonie) — closes the unmet acceptance row. The coach card's "press ?" tip rendered unconditionally, so a touch-only tablet transcriber (no hardware keyboard) was told to press a key they don't have. The hint is now gated behind a fine-pointer media query ([@media(pointer:coarse)]:hidden); the cheatsheet itself only opens via the "?" key, so it already never surfaces without a keyboard. Also bumps the key cap from 11px to text-xs for the 60+ audience. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
85 lines
2.9 KiB
Svelte
85 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import TranscribeDragDemo from './TranscribeDragDemo.svelte';
|
|
</script>
|
|
|
|
<div class="border-brand-sand rounded-sm border bg-white p-7 shadow-sm">
|
|
<h2 class="mb-3 font-serif text-[22px] font-bold text-ink">
|
|
{m.transcribe_coach_title()}
|
|
</h2>
|
|
<p class="mb-6 font-serif text-[15px] leading-relaxed text-ink-2">
|
|
{m.transcribe_coach_preamble()}
|
|
</p>
|
|
|
|
<ol class="m-0 flex list-none flex-col gap-[18px] p-0">
|
|
<!-- Step 1 -->
|
|
<li aria-label="Schritt 1 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
|
|
<span
|
|
aria-hidden="true"
|
|
class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
|
|
>1</span
|
|
>
|
|
<div class="pt-0.5 font-serif text-base leading-snug text-ink">
|
|
<strong>{m.transcribe_coach_step_1_title()}</strong>
|
|
{m.transcribe_coach_step_1_body()}
|
|
<TranscribeDragDemo />
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Step 2 -->
|
|
<li aria-label="Schritt 2 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
|
|
<span
|
|
aria-hidden="true"
|
|
class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
|
|
>2</span
|
|
>
|
|
<div class="pt-0.5 font-serif text-base leading-snug text-ink">
|
|
<strong>{m.transcribe_coach_step_2_title()}</strong>
|
|
{m.transcribe_coach_step_2_body()}
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Step 3 -->
|
|
<li aria-label="Schritt 3 von 3" class="grid grid-cols-[34px_1fr] items-start gap-3.5">
|
|
<span
|
|
aria-hidden="true"
|
|
class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-ink font-sans text-sm font-bold text-white"
|
|
>3</span
|
|
>
|
|
<div class="pt-0.5 font-serif text-base leading-snug text-ink">
|
|
<strong>{m.transcribe_coach_step_3_title()}</strong>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
<div class="border-brand-sand mt-6 flex flex-wrap gap-4 border-t pt-3.5 font-sans text-[13px]">
|
|
<a
|
|
href="https://de.wikipedia.org/wiki/Kurrent"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
referrerpolicy="no-referrer"
|
|
class="text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
|
|
>
|
|
{m.transcribe_coach_footer_kurrent()}
|
|
<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
|
|
</a>
|
|
<a
|
|
href="/hilfe/transkription"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
|
|
>
|
|
{m.transcribe_coach_footer_richtlinien()}
|
|
<span class="ml-1 text-[11px] text-ink-3">{m.common_opens_new_tab()}</span>
|
|
</a>
|
|
<p class="w-full text-ink-3 [@media(pointer:coarse)]:hidden">
|
|
{m.transcribe_coach_shortcut_hint_before()}
|
|
<kbd
|
|
class="rounded border border-line bg-muted px-1.5 py-0.5 font-mono text-xs text-ink shadow-sm"
|
|
>?</kbd
|
|
>
|
|
{m.transcribe_coach_shortcut_hint_after()}
|
|
</p>
|
|
</div>
|
|
</div>
|