next: new homepage

sites/docs/src/lib/components/homepage/card-air.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import Fan from "phosphor-svelte/lib/Fan";
+	import { Tabs } from "bits-ui";
+	import HomeSlider from "$lib/components/homepage/home-slider.svelte";
+
+	let foo = $state([50]);
+
+	const temps: number[] = [50, 80, 95, 80, 50, 40, 60];
+</script>
+
+<div class="relative order-2 lg:order-3 lg:-translate-y-3">
+	<div
+		class="m-2.5 flex aspect-square flex-col justify-between rounded-card-lg bg-[#e0f2fe] px-5 pb-8 pt-5 dark:bg-[#C7E6FA]"
+	>
+		<div class="flex justify-between">
+			<Tabs.Root value="c" class="flex items-center font-medium">
+				<Tabs.Content value="c" class="select-none"
+					><span class="text-[3.625rem] leading-[1] text-indigo-950">21</span
+					></Tabs.Content
+				>
+				<Tabs.Content value="f" class="select-none"
+					><span class="text-[3.625rem] leading-[1] text-indigo-950">69</span
+					></Tabs.Content
+				>
+				<Tabs.List class="ml-1 flex flex-col gap-2 text-[14px]">
+					<Tabs.Trigger
+						value="c"
+						class="text-indigo-950/30 data-[state=active]:text-indigo-950"
+						>°C</Tabs.Trigger
+					>
+					<Tabs.Trigger
+						value="f"
+						class="text-indigo-950/30 data-[state=active]:text-indigo-950"
+						>°F</Tabs.Trigger
+					>
+				</Tabs.List>
+			</Tabs.Root>
+
+			<div class="text-right font-semibold text-indigo-950">
+				<div
+					class="spin_anim ml-auto w-min"
+					style="animation-duration: {(101 - foo[0]) * 100}ms;"
+				>
+					<Fan class="ml-auto size-6 " />
+				</div>
+				<div class="mt-[0.6em] text-xxs leading-[110%] tracking-[-0.01em]">
+					Air<br />Conditioner
+				</div>
+			</div>
+		</div>
+
+		<div class="">
+			<div class="relative my-5 flex justify-between">
+				{#each temps as temp}
+					<div class="outer relative h-16 w-4 rounded-[35px] bg-[#000231]/10">
+						<div
+							class="inner absolute bottom-0 w-full rounded-[35px] bg-indigo-950"
+							style="height: {temp}%"
+						></div>
+					</div>
+				{/each}
+				<div
+					class="absolute -left-1.5 top-1/2 aspect-[212/30] w-[calc(100%+10px)] -translate-y-1/2"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 212 30"
+						fill="none"
+						class="absolute left-0 top-0 h-full w-full object-contain"
+					>
+						<path
+							d="M1 29C10.3489 20.1254 38.5826 2.10999 76.7262 1.04504C124.406 -0.286151 145.441 28.3343 170.332 28.3344C192.075 28.3345 205.975 13.5804 211 7.36823"
+							stroke="#F43F5E"
+							stroke-width="2"
+						/>
+					</svg>
+				</div>
+			</div>
+
+			<HomeSlider bind:value={foo} />
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	.spin_anim {
+		animation-name: spin;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+	}
+</style>

sites/docs/src/lib/components/homepage/card-sound.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { mode } from "mode-watcher";
+	import HomeToolbar from "$lib/components/homepage/home-toolbar.svelte";
+</script>
+
+<div class="relative order-4 lg:order-2 lg:translate-y-1/3">
+	<div
+		class="line_top_gradient absolute -left-10 top-0 h-[1px] w-[calc(100%+50px)] {$mode ===
+		'dark'
+			? 'dark'
+			: ''}"
+	></div>
+	<div
+		class="line_left_gradient absolute -top-[100px] bottom-0 left-0 w-px rotate-180 {$mode ===
+		'dark'
+			? 'dark'
+			: ''}"
+	></div>
+	<div
+		class="line_right_gradient absolute -top-[200px] bottom-0 right-0 w-px rotate-180 {$mode ===
+		'dark'
+			? 'dark'
+			: ''}"
+	></div>
+
+	<div
+		class="dark:border:[rgba(254,_254,_254,_0.15)] m-2.5 aspect-square overflow-hidden rounded-card-lg bg-foreground px-[14px] py-3 dark:border dark:bg-[#2A2B2E]"
+	>
+		<div class="flex justify-between">
+			<h3 class="ml-1.5 mt-[7px] text-xl font-medium text-background dark:text-white">
+				<span class="">Sound</span>
+				<small class="block text-xs opacity-50">control</small>
+			</h3>
+			<HomeToolbar />
+		</div>
+
+		<div
+			class="relative mx-auto mt-[5px] aspect-square w-[189px] rounded-[50%] bg-background dark:bg-white"
+		>
+			<div
+				class="absolute left-1/2 top-2.5 h-[26px] w-2 -translate-x-1/2 rounded-card-sm bg-rose-500"
+			></div>
+			<div
+				class="absolute left-2 right-2 top-1/2 flex -translate-y-1/2 items-center justify-between"
+			>
+				<div
+					class="flex items-center gap-2 text-[#17171766] before:inline-block before:aspect-square before:size-[7px] before:rounded-[50%] before:bg-[#cbcbcbb2] before:content-['']"
+				>
+					L
+				</div>
+				<div
+					class="flex items-center gap-2 text-[#17171766] after:inline-block after:aspect-square after:size-[7px] after:rounded-[50%] after:bg-[#cbcbcbb2] after:content-['']"
+				>
+					R
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	/* lines */
+	.line_top_gradient {
+		background: linear-gradient(to right, transparent 50%, white 50%),
+			linear-gradient(to right, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+		background-size:
+			10px 1px,
+			100% 1px;
+		&.dark {
+			background: linear-gradient(to right, transparent 50%, #171717 50%),
+				linear-gradient(to right, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+			background-size:
+				10px 1px,
+				100% 1px;
+		}
+	}
+	.line_left_gradient {
+		background: linear-gradient(to top, transparent 50%, white 50%),
+			linear-gradient(to top, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+		background-size:
+			1px 10px,
+			100% 100%;
+		&.dark {
+			background: linear-gradient(to top, transparent 50%, #171717 50%),
+				linear-gradient(to top, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+			background-size:
+				1px 10px,
+				100% 100%;
+		}
+	}
+	.line_right_gradient {
+		background: linear-gradient(to top, transparent 50%, white 50%),
+			linear-gradient(to top, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+		background-size:
+			1px 10px,
+			100% 100%;
+		&.dark {
+			background: linear-gradient(to top, transparent 50%, #171717 50%),
+				linear-gradient(to top, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+			background-size:
+				1px 10px,
+				100% 100%;
+		}
+	}
+</style>

sites/docs/src/lib/components/homepage/card-timer.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { mode } from "mode-watcher";
+	import X from "phosphor-svelte/lib/X";
+	import HomeSwitch from "$lib/components/homepage/home-switch.svelte";
+	import HomeSelect from "$lib/components/homepage/home-select.svelte";
+
+	let checked = $state(false);
+	let startTime = $state(0);
+	let stopwatchInterval: number | null = null;
+	let elapsedPausedTime = $state(0);
+	let displayTime = $state("0:00:00");
+
+	function startStopwatch() {
+		if (stopwatchInterval !== null) return;
+		startTime = new Date().getTime() - elapsedPausedTime;
+		stopwatchInterval = window.setInterval(updateStopwatch, 1000);
+	}
+
+	function stopStopwatch() {
+		if (stopwatchInterval !== null) {
+			window.clearInterval(stopwatchInterval);
+		}
+		elapsedPausedTime = new Date().getTime() - startTime;
+		stopwatchInterval = null;
+	}
+
+	function resetStopwatch() {
+		stopStopwatch();
+		elapsedPausedTime = 0;
+		displayTime = "0:00:00";
+	}
+
+	function updateStopwatch() {
+		const currentTime = new Date().getTime();
+		const elapsedTime = currentTime - startTime;
+		const seconds = Math.floor(elapsedTime / 1000) % 60;
+		const minutes = Math.floor(elapsedTime / 1000 / 60) % 60;
+		const hours = Math.floor(elapsedTime / 1000 / 60 / 60);
+		displayTime = `${hours}:${pad(minutes)}:${pad(seconds)}`;
+	}
+
+	function pad(number: number) {
+		return (number < 10 ? "0" : "") + number;
+	}
+
+	const chips = ["design", "code", "other"];
+	let foo = $state("new");
+</script>
+
+<div class="relative order-1 lg:order-5 lg:translate-y-[7%]">
+	<div
+		class="line_top_gradient absolute -left-10 top-0 h-[1px] w-[calc(100%+50px)] {$mode ===
+		'dark'
+			? 'dark'
+			: ''}"
+	></div>
+	<div
+		class="line_right_gradient absolute -top-[200px] bottom-0 right-0 w-px rotate-180 {$mode ===
+		'dark'
+			? 'dark'
+			: ''}"
+	></div>
+	<div class="m-[10px]">
+		<div
+			class="aspect-square w-full rounded-card-lg border border-border-input bg-white px-[14px] py-3 shadow-card dark:bg-[#FAF8F5]"
+		>
+			<div class="mb-5 rounded-15px bg-foreground p-1 dark:bg-[#171717]">
+				<div class="rounded-xl bg-[rgba(81,84,95,0.6)] px-2 pb-8 pt-3 text-white">
+					<div class="text-[2.563rem] font-medium leading-[100%]">
+						{displayTime}
+					</div>
+					<div class="text-[13px] font-medium">
+						Task:
+						<span class="relative ml-1 mr-2 mt-[2px] inline-flex h-[10px] w-[10px]">
+							<span
+								class="{checked
+									? 'ping_anim'
+									: ''} absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"
+							></span>
+							<span
+								class="relative inline-flex h-[10px] w-[10px] rounded-full bg-rose-500"
+							></span>
+						</span>
+						<span class="capitalize">{foo}</span>
+					</div>
+				</div>
+				<div class="labels mb-2 mt-[9px] flex gap-[3px] px-1 font-medium">
+					{#each chips as chip, i}
+						<div
+							data-active={i === 0 ? "" : undefined}
+							class="group flex select-none items-center rounded-[25px] bg-[#31343e] px-2 text-[11px] text-white/70 data-[active]:bg-white data-[active]:text-foreground dark:data-[active]:text-[#171717]"
+						>
+							{chip}
+							<X
+								class="relative ml-1.5 hidden size-1.5 group-data-[active]:block"
+								weight="bold"
+								aria-label="Close"
+							/>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<div class="flex gap-2">
+				<HomeSelect bind:value={foo} />
+				<HomeSwitch
+					bind:checked
+					onCheckedChange={(c) => {
+						if (c) {
+							startStopwatch();
+						} else {
+							resetStopwatch();
+						}
+					}}
+				/>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.line_top_gradient {
+		background: linear-gradient(to right, transparent 50%, white 50%),
+			linear-gradient(to right, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+		background-size:
+			10px 1px,
+			100% 1px;
+		&.dark {
+			background: linear-gradient(to right, transparent 50%, #171717 50%),
+				linear-gradient(to right, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+			background-size:
+				10px 1px,
+				100% 1px;
+		}
+	}
+	.line_right_gradient {
+		background: linear-gradient(to top, transparent 50%, white 50%),
+			linear-gradient(to top, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+		background-size:
+			1px 10px,
+			100% 100%;
+		&.dark {
+			background: linear-gradient(to top, transparent 50%, #171717 50%),
+				linear-gradient(to top, rgba(186, 186, 186, 0), rgba(186, 186, 186, 1));
+			background-size:
+				1px 10px,
+				100% 100%;
+		}
+	}
+
+	.ping_anim {
+		animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+	}
+	@keyframes ping {
+		75%,
+		100% {
+			transform: scale(2);
+			opacity: 0;
+		}
+	}
+</style>