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,118 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
+	import type { TerminalLine } from './types';
+
+	export let line: TerminalLine;
+
+	$: segments = parseColorText(line.content);
+	$: titleSegments = line.cardTitle ? parseColorText(line.cardTitle) : [];
+	$: footerSegments = line.cardFooter ? parseColorText(line.cardFooter) : [];
+</script>
+
+<div class="tui-card" style="--card-accent: {getButtonStyle(line.style)}">
+	{#if line.cardTitle}
+		<div class="card-header">
+			{#if line.icon}
+				<Icon icon={line.icon} width="16" class="card-icon" />
+			{/if}
+			<span class="card-title">
+				{#each titleSegments as segment}
+					{#if getSegmentStyle(segment)}
+						<span style={getSegmentStyle(segment)}>{segment.text}</span>
+					{:else}
+						{segment.text}
+					{/if}
+				{/each}
+			</span>
+		</div>
+	{/if}
+	
+	<div class="card-body">
+		{#if line.image}
+			<img src={line.image} alt={line.imageAlt || ''} class="card-image" />
+		{/if}
+		<div class="card-content">
+			{#each segments as segment}
+				{#if getSegmentStyle(segment)}
+					<span style={getSegmentStyle(segment)}>{segment.text}</span>
+				{:else}
+					{segment.text}
+				{/if}
+			{/each}
+		</div>
+	</div>
+
+	{#if line.cardFooter}
+		<div class="card-footer">
+			{#each footerSegments as segment}
+				{#if getSegmentStyle(segment)}
+					<span style={getSegmentStyle(segment)}>{segment.text}</span>
+				{:else}
+					{segment.text}
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tui-card {
+		border: 1px solid var(--terminal-border);
+		border-radius: 6px;
+		background: color-mix(in srgb, var(--terminal-bg) 80%, var(--card-accent) 5%);
+		margin: 0.5rem 0;
+		overflow: hidden;
+		transition: border-color 0.2s ease;
+	}
+
+	.tui-card:hover {
+		border-color: var(--card-accent);
+	}
+
+	.card-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.6rem 0.75rem;
+		border-bottom: 1px solid var(--terminal-border);
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.card-icon) {
+		color: var(--card-accent);
+	}
+
+	.card-title {
+		font-weight: 600;
+		color: var(--terminal-text);
+		font-size: 0.85rem;
+	}
+
+	.card-body {
+		padding: 0.75rem;
+	}
+
+	.card-image {
+		width: 100%;
+		max-height: 200px;
+		object-fit: cover;
+		border-radius: 4px;
+		margin-bottom: 0.5rem;
+	}
+
+	.card-content {
+		color: var(--terminal-muted);
+		font-size: 0.85rem;
+		line-height: 1.5;
+		white-space: pre-wrap;
+	}
+
+	.card-footer {
+		padding: 0.5rem 0.75rem;
+		border-top: 1px solid var(--terminal-border);
+		font-size: 0.75rem;
+		color: var(--terminal-muted);
+		background: rgba(0, 0, 0, 0.05);
+	}
+</style>