Initial release 0.1.0

src/routes/live/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import PreviewNotice from '#lib/components/PreviewNotice.svelte';
+	import { formatClock } from '#lib/format.js';
+	import { resolve } from '$app/paths';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+	let promptSize = $state(1.55);
+</script>
+
+<svelte:head><title>Live-Vorschau | Sendewerk</title></svelte:head>
+
+<div class="page-wrap live-page">
+	<header class="live-header">
+		<div>
+			<p class="eyebrow"><span class="live-pulse"></span> Live-Modus · Vorschau</p>
+			<h1>{data.show.title}</h1>
+		</div>
+		<div class="live-header-actions">
+			<div class="font-control" aria-label="Prompter-Schriftgröße">
+				<button
+					type="button"
+					onclick={() => (promptSize = Math.max(1.15, promptSize - 0.1))}
+					aria-label="Schrift verkleinern">A−</button
+				>
+				<button
+					type="button"
+					onclick={() => (promptSize = Math.min(2.1, promptSize + 0.1))}
+					aria-label="Schrift vergrößern">A+</button
+				>
+			</div>
+			<a href={resolve('/sendungen')}>Planung schließen</a>
+		</div>
+	</header>
+
+	<PreviewNotice area="Live-Modus" />
+
+	<div class="live-grid">
+		<section class="live-current" style={`--prompt-size: ${promptSize}rem`}>
+			<div class="live-kicker">
+				<span>Aktuell · {data.current.section}</span><strong
+					>{formatClock(data.current.durationSeconds)}</strong
+				>
+			</div>
+			<h2>{data.current.title}</h2>
+			<div class="prompter-copy">{data.current.intro}</div>
+			<div class="moderation-card">
+				<span>Moderationsstichpunkte</span>
+				<p>{data.current.moderation}</p>
+			</div>
+			<details class="research-details">
+				<summary>Recherche öffnen</summary>
+				<p>
+					Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
+					Öffnen die Leseposition.
+				</p>
+			</details>
+			<div class="transition-card">
+				<span>Überleitung</span>
+				<p>{data.current.transition}</p>
+			</div>
+		</section>
+
+		<aside class="live-rail">
+			<div class="next-card">
+				<span>Als Nächstes</span>
+				{#if data.next}
+					<h3>{data.next.title}</h3>
+					<p>{data.next.section} · {formatClock(data.next.durationSeconds)}</p>
+				{:else}
+					<h3>Sendungsende</h3>
+					<p>Kein weiteres Stück eingeplant.</p>
+				{/if}
+			</div>
+			<div class="live-progress">
+				<header><span>Ablauf</span><strong>2 / 4</strong></header>
+				<div class="progress-track"><span></span></div>
+				{#each data.show.sections as section, index (section.id)}
+					<div class:active={index === 1} class="rail-section">
+						<span>{String(index + 1).padStart(2, '0')}</span>
+						<div>
+							<strong>{section.name}</strong><small>{formatClock(section.durationSeconds)}</small>
+						</div>
+					</div>
+				{/each}
+			</div>
+			<div class="readonly-actions" aria-label="Spätere Live-Aktionen">
+				<span>Zurück</span><strong>In Etappe 5 steuerbar</strong><span>Erledigen</span>
+			</div>
+		</aside>
+	</div>
+</div>