20 lines
2.6 KiB
XML
20 lines
2.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="560" viewBox="0 0 960 560" role="img" aria-labelledby="title desc">
|
|
<title id="title">Учебный маршрут мобильного действия</title>
|
|
<desc id="desc">Три шага summary, details и confirm образуют явный маршрут. Ветка hover-only на профиле narrow, coarse, unavailable блокируется и сохраняет текущий путь.</desc>
|
|
<rect width="960" height="560" fill="#0f172a" rx="24"/>
|
|
<text x="56" y="70" fill="#f8fafc" font-family="Arial, sans-serif" font-size="30" font-weight="700">Один путь: context → details → action</text>
|
|
<text x="56" y="105" fill="#cbd5e1" font-family="Arial, sans-serif" font-size="19">Учебный contract: не рендер браузера и не usability-тест</text>
|
|
<g font-family="Arial, sans-serif">
|
|
<rect x="56" y="180" width="220" height="150" rx="18" fill="#1e293b" stroke="#38bdf8" stroke-width="3"/>
|
|
<text x="82" y="225" fill="#7dd3fc" font-size="18" font-weight="700">01 · summary</text><text x="82" y="262" fill="#fff" font-size="24">Контекст</text><text x="82" y="294" fill="#cbd5e1" font-size="17">что подтверждаем</text>
|
|
<rect x="370" y="180" width="220" height="150" rx="18" fill="#1e293b" stroke="#38bdf8" stroke-width="3"/>
|
|
<text x="396" y="225" fill="#7dd3fc" font-size="18" font-weight="700">02 · details</text><text x="396" y="262" fill="#fff" font-size="24">Проверить</text><text x="396" y="294" fill="#cbd5e1" font-size="17">данные перед действием</text>
|
|
<rect x="684" y="180" width="220" height="150" rx="18" fill="#0c4a6e" stroke="#67e8f9" stroke-width="3"/>
|
|
<text x="710" y="225" fill="#a5f3fc" font-size="18" font-weight="700">03 · confirm</text><text x="710" y="262" fill="#fff" font-size="24">Продолжить</text><text x="710" y="294" fill="#cffafe" font-size="17">явный labelled control</text>
|
|
<path d="M280 255h76m-16-16 16 16-16 16M594 255h76m-16-16 16 16-16 16" stroke="#7dd3fc" stroke-width="5" fill="none"/>
|
|
<rect x="56" y="405" width="540" height="96" rx="16" fill="#3f1d2e" stroke="#fb7185" stroke-width="3"/>
|
|
<text x="82" y="445" fill="#fecdd3" font-size="20" font-weight="700">hover-only + narrow/coarse/unavailable</text><text x="82" y="478" fill="#fff" font-size="19">blocked → rollback: keep-current-path</text>
|
|
<path d="M694 410c-25 44-52 62-92 70" stroke="#fb7185" stroke-width="5" fill="none"/><path d="M612 461l-15 19 24 1" fill="none" stroke="#fb7185" stroke-width="5"/>
|
|
</g>
|
|
</svg>
|