frontend: add svelte frontend

2025-07-20 23:51:54 -06:00
parent a01ec82833
commit 7a2b0fd4d6
40 changed files with 17358 additions and 349 deletions
@@ -0,0 +1,133 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { startStream } from './connect';
+	import { type App } from './apps';
+
+	interface Props {
+		app: App;
+		server_name: string;
+	}
+
+	let { app, server_name }: Props = $props();
+
+	async function streamApp() {
+		await startStream(app, server_name);
+	}
+</script>
+
+<div class="app-box" on:click={streamApp}>
+	<div class="app-artwork">
+		<div class="play-button"></div>
+	</div>
+	<div class="app-title">{app.title}</div>
+	<div class="app-server">{server_name}</div>
+</div>
+
+<style>
+	body {
+		font-family: Arial, sans-serif;
+		margin: 20px;
+		background-color: #1a1a1a;
+		color: white;
+	}
+
+	.apps-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20px;
+		padding: 20px 0;
+	}
+
+	.app-box {
+		position: relative;
+		width: 200px;
+		height: 280px;
+		cursor: pointer;
+		transition: all 0.3s ease;
+	}
+
+	.app-box:hover {
+		transform: translateY(-5px);
+		box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
+	}
+
+	.app-artwork {
+		width: 200px;
+		height: 200px;
+		background-color: #333;
+		border: 2px solid #555;
+		border-radius: 8px;
+		position: relative;
+		overflow: hidden;
+		transition: border-color 0.3s ease;
+	}
+
+	.app-box:hover .app-artwork {
+		border-color: #00aaff;
+	}
+
+	.app-title {
+		text-align: center;
+		margin: 10px 0 5px 0;
+		font-size: 16px;
+		font-weight: bold;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.app-server {
+		text-align: center;
+		font-size: 12px;
+		color: #aaa;
+		margin: 0;
+	}
+
+	.play-button {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 60px;
+		height: 60px;
+		background-color: rgba(0, 170, 255, 0.9);
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: opacity 0.3s ease;
+		pointer-events: none;
+	}
+
+	.play-button::after {
+		content: '';
+		width: 0;
+		height: 0;
+		border-left: 20px solid white;
+		border-top: 12px solid transparent;
+		border-bottom: 12px solid transparent;
+		margin-left: 4px;
+	}
+
+	.app-box:hover .play-button {
+		opacity: 1;
+	}
+
+	.app-box.clicked {
+		transform: scale(0.95);
+	}
+
+	.loading {
+		text-align: center;
+		font-size: 18px;
+		margin-top: 50px;
+	}
+
+	.error {
+		color: #ff4444;
+		text-align: center;
+		font-size: 18px;
+		margin-top: 50px;
+	}
+</style>