add title bar

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/launch.json
 .idea
 .DS_Store
 *.suo

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"type": "node",
+			"request": "launch",
+			"name": "Launch Program",
+			"skipFiles": ["<node_internals>/**"],
+			"program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
+			"args": ["dev"],
+			"experimentalNetworking": "off"
+		}
+	]
+}

public/template.json

@@ -0,0 +1,6 @@
+{
+	"name": "Sakanana的手机",
+	"author": "0nepeop1e",
+	"link": "https://x.com/0nepeop1e",
+	"description": "长得像Sakanana的手机"
+}

src/App.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
 	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
-	import { SendHorizontalIcon } from '@lucide/svelte';
+	import {
+		BatteryFullIcon,
+		HomeIcon,
+		MessageCircleIcon,
+		SendHorizontalIcon,
+		SignalIcon,
+		Tally4Icon,
+		TriangleIcon,
+		WifiIcon
+	} from '@lucide/svelte';
 	import RenderComment from '@/components/RenderComment.svelte';
+	import axolotl from '@/assets/axolotl.png';
+
 	let { chats }: { chats: Comment[] } = $props();
 
 	let date = $state(new Date());
@@ -15,7 +26,7 @@
 		const s = str.toString();
 		const diff = char - s.length;
 		if (diff <= 0) return s;
-		return s + '0'.repeat(diff);
+		return '0'.repeat(diff) + s;
 	}
 
 	$effect(() => {
@@ -26,26 +37,57 @@
 	});
 </script>
 
-<div class="bg-frame px-30 pt-30 pb-15 rounded-30 h-full w-full flex flex-col gap-15 font-naikai">
+<div class="w-460 h-800 relative">
-	<div class="grow flex flex-col rounded-15 overflow-hidden bg-background">
+	<div
-		<div class="bg-status flex flex-row justify-center p-5 text-16 font-bold text-status-text">
+		class="absolute -z-10 -right-6 top-150 w-15 rounded-5 bg-frame border-3 border-frame-border h-120"
-			<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
+	></div>
-		</div>
+	<div
-		<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
+		class="absolute -z-10 -right-6 top-290 w-15 rounded-5 bg-frame border-3 border-frame-border h-75"
-			{#each render_chats as chat (chat.id ?? chat)}
+	></div>
-				<RenderComment {chat} />
+	<div
-			{/each}
+		class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-10 bottom-215 rotate-82"
-		</div>
+	></div>
-		<div class="px-30 py-15">
+	<div
-			<div
+		class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-5 bottom-215 rotate-70"
-				class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
+	></div>
-			>
+	<div
-				<span>回覆...</span>
+		class="bg-frame p-15 rounded-25 z-10 border-frame-border border-5 w-full h-full flex flex-col gap-5 font-naikai"
-				<SendHorizontalIcon class="size-20 text-input-icon" />
+	>
+		<div
+			class="w-full h-full flex flex-col border-3 border-screen-border rounded-10 overflow-hidden bg-background relative"
+		>
+			<div class="bg-status shadow-md text-16 font-bold text-status-text -mx-10">
+				<div class="py-2 px-18 flex flex-row gap-4">
+					<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
+					<WifiIcon class="ml-auto" />
+					<SignalIcon />
+					<BatteryFullIcon />
+					<span>100%</span>
+				</div>
+				<div class="px-24 py-8 font-bold text-24 gap-6 flex flex-row items-center">
+					<MessageCircleIcon />
+					聊天室
+				</div>
+			</div>
+			<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
+				{#each render_chats as chat (chat)}
+					<RenderComment {chat} />
+				{/each}
+			</div>
+			<div class="px-30 py-15">
+				<div
+					class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
+				>
+					<span>回覆...</span>
+					<SendHorizontalIcon class="size-20 text-input-icon" />
+				</div>
+			</div>
+			<div class="h-48 flex flex-row items-center justify-center text-navigation gap-80">
+				<Tally4Icon class="size-24" />
+				<HomeIcon class="size-24" />
+				<TriangleIcon class="size-24 origin-center -rotate-90" />
 			</div>
 		</div>
 	</div>
-	<div class="flex flex-row justify-center">
+	<img src={axolotl} alt="axolotl" class="z-20 w-340 h-332 absolute -right-192 -bottom-76" />
-		<div class="size-50 rounded-full bg-background"></div>
-	</div>
 </div>

src/app.css

@@ -3,11 +3,14 @@
 @theme {
 	--spacing: calc(var(--render-scale, 1) * 1px);
 
-	--color-frame: var(--chat-frame, #ffafb5);
+	--color-frame: var(--chat-frame, #ffced1);
 	--color-status: var(--chat-status, #f4f4f4);
 	--color-status-text: var(--chat-status-text, #000000);
 	--color-background: var(--chat-background, #ffffff);
 
+	--color-frame-border: var(--chat-frame-border, #d2898d);
+	--color-screen-border: var(--chat-screen-border, #000000);
+
 	--color-name: var(--chat-name, #000000);
 	--color-name-moderator: var(--chat-name-moderator, #193cb8);
 	--color-name-owner: var(--chat-name-owner, #a65f00);
@@ -22,6 +25,8 @@
 	--color-input: var(--chat-input, #f4f4f4);
 	--color-input-text: var(--chat-input-text, #8f8f8f);
 
+	--color-navigation: var(--chat-navigation, #6f6f6f);
+
 	--font-naikai: 'NaikaiFont', var(--font-sans);
 }
 
@@ -33,13 +38,8 @@
 	font-size: calc(--value(number) * var(--spacing));
 }
 
-@font-face {
+@utility border-* {
-	font-family: 'NaikaiFont';
+	border-width: calc(--value(number) * var(--spacing));
-	src:
-		url('./assets/naikai/NaikaiFont-ExtraLight.woff') format('woff'),
-		url('./assets/naikai/NaikaiFont-ExtraLight.woff2') format('woff2');
-	font-weight: 200;
-	font-display: swap;
 }
 
 @font-face {
@@ -60,15 +60,6 @@
 	font-display: swap;
 }
 
-@font-face {
-	font-family: 'NaikaiFont';
-	src:
-		url('./assets/naikai/NaikaiFont-SemiBold.woff') format('woff'),
-		url('./assets/naikai/NaikaiFont-SemiBold.woff2') format('woff2');
-	font-weight: 600;
-	font-display: swap;
-}
-
 @font-face {
 	font-family: 'NaikaiFont';
 	src:
@@ -84,6 +75,6 @@
 	}
 	:root,
 	body {
-		@apply bg-transparent;
+		@apply overflow-hidden bg-transparent;
 	}
 }

src/components/RenderComment.svelte

@@ -43,7 +43,7 @@
 		>
 			<div
 				class={[
-					'text-ellipsis whitespace-nowrap px-5 gap-5 flex flex-row items-center font-semibold text-12 max-w-full',
+					'text-ellipsis whitespace-nowrap px-5 gap-5 flex flex-row items-center font-bold text-12 max-w-full',
 					author_color,
 					chat.data.isOwner ? 'justify-end' : 'justify-start'
 				]}