From 8e9f28a6ac2bd19e51d3d28f4ad0c8cd7e4379bc Mon Sep 17 00:00:00 2001
From: Vasilisk9812 <scorpion73054@gmail.com>
Date: Sun, 14 Dec 2025 19:05:57 +0900
Subject: [PATCH] added bootstrap styles to TimeLine.svelte

---
 src/lib/components/TimeLine.svelte | 327 +++++++++++------------------
 1 file changed, 122 insertions(+), 205 deletions(-)

diff --git a/src/lib/components/TimeLine.svelte b/src/lib/components/TimeLine.svelte
index 7526a4a..df9642e 100644
--- a/src/lib/components/TimeLine.svelte
+++ b/src/lib/components/TimeLine.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import type { Prediction } from "$lib/types";
+	import "bootstrap-icons/font/bootstrap-icons.css";
 
 	let { prediction }: { prediction: Prediction | null } = $props();
 
@@ -11,6 +12,7 @@
 	let isPlaying = $state(false);
 	let currentIndex = $state(0);
 	let playbackSpeed = $state(1);
+	let isCollapsed = $state(false);
 	let animationFrame: number | null = null;
 	let lastUpdateTime = 0;
 
@@ -119,11 +121,15 @@
 	}
 
 	function changeSpeed() {
-		const speeds = [1, 2, 5, 10];
+		const speeds = [1, 2, 5, 0.5];
 		const currentSpeedIndex = speeds.indexOf(playbackSpeed);
 		playbackSpeed = speeds[(currentSpeedIndex + 1) % speeds.length];
 	}
 
+	function handleToggleCollapse() {
+		isCollapsed = !isCollapsed;
+	}
+
 	$effect(() => {
 		return () => {
 			if (animationFrame !== null) {
@@ -133,70 +139,108 @@
 	});
 </script>
 
-<div class="timeline-container">
-	<div class="timeline-info">
-		<div class="info-section">
-			<span class="label">Time:</span>
-			<span class="value">{timeElapsed}</span>
-		</div>
-		{#if currentPosition}
-			<div class="info-section">
-				<span class="label">Altitude:</span>
-				<span class="value">{Math.round(currentPosition.alt)} m</span>
-			</div>
-			<div class="info-section">
-				<span class="label">Position:</span>
-				<span class="value"
-					>{currentPosition.lat.toFixed(4)}, {currentPosition.lng.toFixed(4)}</span
-				>
-			</div>
-		{/if}
+<div class="timeline-container card shadow-sm">
+	<div
+		class="card-header bg-primary text-white d-flex justify-content-between align-items-center p-1 px-3"
+		style="cursor:pointer;"
+		onclick={handleToggleCollapse}
+		role="button"
+		tabindex="0"
+		onkeydown={(e) => e.key === 'Enter' && handleToggleCollapse()}
+	>
+		<span class="fw-bold mb-0">Flight Timeline</span>
+		<button
+			type="button"
+			class="btn btn-sm btn-primary p-0"
+			aria-label="Toggle timeline visibility"
+		>
+			<i class="bi {isCollapsed ? 'bi-caret-left-fill' : 'bi-caret-down-fill'}"></i>
+		</button>
 	</div>
 
-	<div class="timeline-controls">
-		<div class="control-buttons">
-			<button
-				class="control-btn"
-				on:click={stop}
-				disabled={!prediction || currentIndex === 0}
-				title="Start"
-			>
-				<i class="bi bi-skip-start-fill"></i>
-			</button>
+	{#if !isCollapsed}
+		<div class="card-body p-3">
+			<div class="timeline-info mb-2">
+				<div class="info-section">
+					<span class="form-label mb-1">Time:</span>
+					<span class="fw-bold font-monospace">{timeElapsed}</span>
+				</div>
+				{#if currentPosition}
+					<div class="info-section">
+						<span class="form-label mb-1">Altitude:</span>
+						<span class="fw-bold font-monospace">{Math.round(currentPosition.alt)} m</span>
+					</div>
+					<div class="info-section">
+						<span class="form-label mb-1">Position:</span>
+						<span class="fw-bold font-monospace"
+							>{currentPosition.lat.toFixed(4)}, {currentPosition.lng.toFixed(4)}</span
+						>
+					</div>
+				{/if}
+			</div>
 
-			{#if !isPlaying}
-				<button class="control-btn play-btn" on:click={play} disabled={!prediction} title="Play">
-					<i class="bi bi-play-fill"></i>
-				</button>
-			{:else}
-				<button class="control-btn" on:click={pause} title="Pause">
-					<i class="bi bi-pause-fill"></i>
-				</button>
-			{/if}
+			<div class="timeline-controls">
+				<div class="btn-group me-2" role="group">
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-primary"
+						onclick={stop}
+						disabled={!prediction || currentIndex === 0}
+						title="Reset to start"
+						aria-label="Reset to start"
+					>
+						<i class="bi bi-skip-start-fill"></i>
+					</button>
 
-			<button
-				class="control-btn speed-btn"
-				on:click={changeSpeed}
-				disabled={!prediction}
-				title="Speed"
-			>
-				{playbackSpeed}x
-			</button>
+					{#if !isPlaying}
+						<button
+							type="button"
+							class="btn btn-sm btn-success"
+							onclick={play}
+							disabled={!prediction}
+							title="Play animation"
+							aria-label="Play animation"
+						>
+							<i class="bi bi-play-fill"></i>
+						</button>
+					{:else}
+						<button
+							type="button"
+							class="btn btn-sm btn-warning"
+							onclick={pause}
+							title="Pause animation"
+							aria-label="Pause animation"
+						>
+							<i class="bi bi-pause-fill"></i>
+						</button>
+					{/if}
+
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={changeSpeed}
+						disabled={!prediction}
+						title="Change playback speed"
+						aria-label="Change playback speed"
+					>
+						{playbackSpeed}x
+					</button>
+				</div>
+
+				<div class="flex-grow-1 position-relative">
+					<input
+						type="range"
+						min="0"
+						max={flightPathLength - 1}
+						value={currentIndex}
+						oninput={handleSliderChange}
+						disabled={!prediction}
+						class="form-range timeline-slider"
+					/>
+				</div>
+			</div>
 		</div>
-
-		<div class="progress-container">
-			<input
-				type="range"
-				min="0"
-				max={flightPathLength - 1}
-				value={currentIndex}
-				on:input={handleSliderChange}
-				disabled={!prediction}
-				class="timeline-slider"
-			/>
-			<div class="progress-bar" style="width: {progress}%"></div>
-		</div>
-	</div>
+	{/if}
 </div>
 
 <style>
@@ -205,172 +249,53 @@
 		bottom: 20px;
 		left: 50%;
 		transform: translateX(-50%);
-		background: rgba(255, 255, 255, 0.95);
-		border-radius: 12px;
-		padding: 16px 20px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-		min-width: 600px;
-		max-width: 800px;
+		min-width: 500px;
+		max-width: 700px;
 		z-index: 1000;
+		background: var(--bs-body-bg, #fff);
 		backdrop-filter: blur(10px);
 	}
 
 	.timeline-info {
 		display: flex;
 		justify-content: space-around;
-		margin-bottom: 12px;
-		gap: 16px;
+		gap: 0.5rem;
 	}
 
 	.info-section {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 4px;
-	}
-
-	.label {
-		font-size: 11px;
-		color: #666;
-		text-transform: uppercase;
-		font-weight: 600;
-		letter-spacing: 0.5px;
-	}
-
-	.value {
-		font-size: 14px;
-		color: #000;
-		font-weight: 600;
-		font-family: monospace;
+		gap: 0.001rem;
+		flex: 1;
 	}
 
 	.timeline-controls {
 		display: flex;
 		align-items: center;
-		gap: 12px;
-	}
-
-	.control-buttons {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-	}
-
-	.control-btn {
-		width: 40px;
-		height: 40px;
-		border: none;
-		border-radius: 50%;
-		background: #007bff;
-		color: white;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 18px;
-		transition: all 0.2s ease;
-	}
-
-	.control-btn:hover:not(:disabled) {
-		background: #0056b3;
-		transform: scale(1.1);
-	}
-
-	.control-btn:disabled {
-		background: #ccc;
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-
-	.play-btn {
-		width: 48px;
-		height: 48px;
-		font-size: 22px;
-		background: #28a745;
-	}
-
-	.play-btn:hover:not(:disabled) {
-		background: #218838;
-	}
-
-	.speed-btn {
-		border-radius: 8px;
-		width: 50px;
-		font-size: 12px;
-		font-weight: 700;
-	}
-
-	.progress-container {
-		flex: 1;
-		position: relative;
-		height: 40px;
-		display: flex;
-		align-items: center;
-	}
-
-	.timeline-slider {
-		width: 100%;
-		height: 6px;
-		border-radius: 3px;
-		outline: none;
-		background: #e0e0e0;
-		-webkit-appearance: none;
-		appearance: none;
-		cursor: pointer;
-		position: relative;
-		z-index: 2;
+		gap: 0.5rem;
 	}
 
+	/* Custom range slider styling to match Bootstrap theme */
 	.timeline-slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: #007bff;
-		cursor: pointer;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+		background: var(--bs-primary, #007bff);
 	}
 
 	.timeline-slider::-moz-range-thumb {
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: #007bff;
-		cursor: pointer;
-		border: none;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+		background: var(--bs-primary, #007bff);
 	}
 
-	.timeline-slider:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-
-	.progress-bar {
-		position: absolute;
-		left: 0;
-		top: 50%;
-		transform: translateY(-50%);
-		height: 6px;
-		background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
-		border-radius: 3px;
-		transition: width 0.05s linear;
-		pointer-events: none;
-		z-index: 1;
-	}
-
-	@media (max-width: 768px) {
+	/* Responsive design */
+	@media (max-width: 767.98px) {
 		.timeline-container {
-			min-width: 90%;
-			max-width: 90%;
-			padding: 12px 16px;
+			min-width: calc(100vw - 40px);
+			max-width: calc(100vw - 40px);
+			bottom: 10px;
 		}
 
 		.timeline-info {
 			flex-direction: column;
-			gap: 8px;
-			margin-bottom: 8px;
+			gap: 0.5rem;
 		}
 
 		.info-section {
@@ -378,16 +303,8 @@
 			justify-content: space-between;
 		}
 
-		.control-btn {
-			width: 36px;
-			height: 36px;
-			font-size: 16px;
-		}
-
-		.play-btn {
-			width: 42px;
-			height: 42px;
-			font-size: 20px;
+		.btn-group {
+			flex-wrap: nowrap;
 		}
 	}
 </style>