new layout

src/App.svelte

@@ -1,7 +1,17 @@
 <script lang="ts">
 	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
-	import { SendHorizontalIcon } from '@lucide/svelte';
+	import {
+		BatteryFullIcon,
+		ChevronLeftIcon,
+		HomeIcon,
+		SendHorizontalIcon,
+		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());
@@ -26,26 +36,52 @@
 	});
 </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="grow flex flex-col rounded-15 overflow-hidden bg-background">
-		<div class="bg-status flex flex-row justify-center p-5 text-16 font-bold text-status-text">
-			<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
-		</div>
-		<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
-			{#each render_chats as chat (chat.id ?? chat)}
-				<RenderComment {chat} />
-			{/each}
-		</div>
-		<div class="px-30 py-15">
+<div class="w-460 h-800 relative">
+	<div
+		class="absolute -z-10 -right-6 top-150 w-15 rounded-5 bg-frame border-3 border-frame-border h-120"
+	></div>
+	<div
+		class="absolute -z-10 -right-6 top-290 w-15 rounded-5 bg-frame border-3 border-frame-border h-75"
+	></div>
+	<div
+		class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-10 bottom-215 rotate-82"
+	></div>
+	<div
+		class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-5 bottom-215 rotate-70"
+	></div>
+	<div
+		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"
+	>
+		<div
+			class="w-full h-full flex flex-col border-3 border-screen-border rounded-10 overflow-hidden bg-background relative"
+		>
 			<div
-				class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
+				class="bg-status/80 gap-4 shadow-md backdrop-blur-md flex flex-row py-2 px-18 text-16 font-bold text-status-text absolute top-0 -left-10 -right-10"
 			>
-				<span>回覆...</span>
-				<SendHorizontalIcon class="size-20 text-input-icon" />
+				<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
+				<WifiIcon class="h-full w-auto ml-auto" />
+				<BatteryFullIcon class="h-full w-auto" />
+				<span>100%</span>
+			</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">
-		<div class="size-50 rounded-full bg-background"></div>
-	</div>
+	<img src={axolotl} alt="axolotl" class="z-20 w-340 h-332 absolute -right-192 -bottom-76" />
 </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 {
-	font-family: 'NaikaiFont';
-	src:
-		url('./assets/naikai/NaikaiFont-ExtraLight.woff') format('woff'),
-		url('./assets/naikai/NaikaiFont-ExtraLight.woff2') format('woff2');
-	font-weight: 200;
-	font-display: swap;
+@utility border-* {
+	border-width: calc(--value(number) * var(--spacing));
 }
 
 @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'
 				]}