Website Redesign 7

2025-11-28 02:40:12 +00:00
parent 9b9a201c3e
commit 96e2d0650c
72 changed files with 7504 additions and 1231 deletions
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { user } from '$lib/config';
+	import type { SpeedPreset } from '$lib/config';
+
+	export let title = 'terminal';
+	export let interactive = true;
+	export let hasButtons = false;
+</script>
+
+<div class="tui-statusbar top">
+	<span class="status-left">
+		<Icon icon="mdi:arch" width="14" />
+		<span>{user.username}@{user.hostname}</span>
+	</span>
+	<span class="status-center">{title}</span>
+	<span class="status-right">
+		{#if interactive && hasButtons}
+			<span class="hint">↑↓ navigate</span>
+			<span class="hint">⏎ select</span>
+		{/if}
+	</span>
+</div>
+
+<style>
+	.tui-statusbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.4rem 0.75rem;
+		font-size: 0.75rem;
+		background: var(--terminal-bg-light);
+		border-color: var(--terminal-border);
+	}
+
+	.tui-statusbar.top {
+		border-bottom: 1px solid var(--terminal-border);
+	}
+
+	.status-left, .status-right {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--terminal-muted);
+	}
+
+	.status-center {
+		color: var(--terminal-primary);
+		font-weight: 600;
+	}
+
+	.hint {
+		padding: 0.1rem 0.4rem;
+		background: var(--terminal-border);
+		border-radius: 3px;
+		font-size: 0.7rem;
+	}
+
+	@media (max-width: 768px) {
+		.hint {
+			display: none;
+		}
+	}
+</style>