Files
midrandbooks/MidrandBookshop/Components/Layout/ReconnectModal.razor
T
2026-07-18 10:25:41 +02:00

56 lines
2.8 KiB
Plaintext

<script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>
<dialog id="components-reconnect-modal" data-nosnippet>
<div class="glassine-page-jacket"></div>
<div class="reconnect-content">
<svg class="waveform-svg" viewBox="0 0 54 50" width="60" height="60" xmlns="http://www.w3.org/2000/svg">
<rect class="bar bar-1" x="2" y="15" width="4" height="20" rx="2" fill="currentColor" />
<rect class="bar bar-2" x="14" y="5" width="4" height="40" rx="2" fill="currentColor" />
<rect class="bar bar-3" x="26" y="20" width="4" height="10" rx="2" fill="currentColor" />
<rect class="bar bar-4" x="38" y="10" width="4" height="30" rx="2" fill="currentColor" />
<rect class="bar bar-5" x="50" y="18" width="4" height="14" rx="2" fill="currentColor" />
</svg>
<div class="sync-message-body font-monospace text-uppercase small-tracking">
<span class="components-reconnect-first-attempt-visible">
Losing signal...
</span>
<span class="components-reconnect-repeated-attempt-visible">
reconnecting in <span id="components-seconds-to-next-attempt" class="fw-bold">0</span>s...
</span>
<span class="components-reconnect-failed-visible text-crimson">
Playback disconnected.
</span>
<span class="components-pause-visible">
Reading layout paused.
</span>
<span class="components-resume-failed-visible text-crimson">
State alignment broken.
</span>
</div>
<div class="sync-action-node">
<button id="components-reconnect-button" class="btn-glass-action components-reconnect-failed-visible">
<span>Retry Sync</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" />
</svg>
</button>
<button id="components-resume-button" class="btn-glass-action components-pause-visible components-resume-failed-visible">
<span>Reload Session</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 4 23 10 17 10"></polyline>
<polyline points="1 20 1 14 7 14"></polyline>
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
</svg>
</button>
</div>
</div>
</dialog>