add windows 11 demo

src/assets/mockups/close.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.6161 10.5657L10.5656 9.61618L6.23239 5.28293L10.5658 0.949519L9.61625 7.92742e-06L5.28288 4.33342L0.949503 0L0 0.949511L4.33338 5.28293L0.000157237 9.61619L0.94966 10.5657L5.28288 6.23244L9.6161 10.5657Z" fill="white" fill-opacity="0.8"/>
+</svg>

src/assets/mockups/maximize.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4 1C10.4 0.447715 9.95228 0 9.4 0H1C0.447715 0 0 0.447716 0 1V9.4C0 9.95228 0.447716 10.4 1 10.4H9.4C9.95228 10.4 10.4 9.95228 10.4 9.4V1ZM2.4 9C1.84772 9 1.4 8.55229 1.4 8V2.4C1.4 1.84772 1.84771 1.4 2.4 1.4H8C8.55228 1.4 9 1.84771 9 2.4V8C9 8.55228 8.55229 9 8 9H2.4Z" fill="white" fill-opacity="0.8"/>
+</svg>

src/assets/mockups/minimize.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="3" viewBox="0 0 11 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4 0.800007H0V2.20001H10.4V0.800007Z" fill="white" fill-opacity="0.8"/>
+</svg>

src/lib/css/fluent.css

@@ -0,0 +1,69 @@
+@font-face {
+	font-family: "Segoe UI Variable";
+	src: url($assets/fonts/suivar.ttf);
+}
+
+:root {
+	--mica-accent: rgba(47, 53, 72, 0.44);
+	--fluent-stroke-color: rgba(255, 255, 255, 0.15);
+	--fluent-stroke-width: thin;
+	--fluent-stroke: solid var(--fluent-stroke-color) var(--fluent-stroke-width);
+	--text-font: "Segoe UI Variable", sans-serif !important;
+	--text-color: #ffffff !important;
+	--text-size: 11pt !important;
+	--on-mica-bg: rgba(255, 255, 255, 0.08);
+	--fluent-ease-in: cubic-bezier(0.6, 0, 0.8, 0.6);
+	--fluent-ease-out: cubic-bezier(0.2, 0.8, 0.4, 1);
+	user-select: none;
+}
+
+.fluent-press {
+	transition: 0.2s transform var(--fluent-ease-out);
+}
+
+.fluent-press:active {
+	/* transform: scale(0.97); */
+	opacity: 0.75;
+}
+
+.mica-backdrop {
+	backdrop-filter: blur(200px);
+	background-color: var(--mica-accent);
+}
+
+.on-mica-bg {
+	background-color: var(--on-mica-bg);
+}
+
+.window {
+	border: var(--fluent-stroke);
+	border-radius: 8px;
+	box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
+	overflow: hidden;
+}
+
+button {
+	border: var(--fluent-stroke);
+	border-radius: 4px;
+	background-color: rgba(255, 255, 255, 0.15);
+	height: 32px;
+	padding: 0 12px;
+	font-size: 10pt !important;
+	transition: 0.3s var(--fluent-ease-out);
+	transition-property: background-color, opacity;
+}
+
+button * {
+	font-size: 10pt !important;
+}
+
+button:hover {
+	background-color: rgba(255, 255, 255, 0.25);
+}
+
+button:active {
+	filter: none;
+	transition: 0.3s var(--fluent-ease-out);
+	background-color: rgba(255, 255, 255, 0.2);
+	opacity: 0.8;
+}

src/routes/+layout.svelte

@@ -6,8 +6,8 @@
 	import "$lib/css/index.css";
 	import { onMount } from "svelte";
 
-	const excludedRoutesNav = ["/mockup/boot"];
+	const excludedRoutesNav = ["/mockup/boot", "/mockup/w11"];
-	const excludedRoutesBg = ["/mockup"];
+	const excludedRoutesBg = ["/mockup", "/mockup/w11"];
 	$: isNavExcluded = excludedRoutesNav.some((route) => $page.url?.pathname.startsWith(route));
 	$: isBgExcluded = excludedRoutesBg.some((route) => $page.url?.pathname === route);
 </script>

src/routes/mockup/w11/+page.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import "$lib/css/fluent.css";
+	import Logo from "$components/Logo.svelte";
+	import close from "$assets/mockups/close.svg";
+	import maximize from "$assets/mockups/maximize.svg";
+	import minimize from "$assets/mockups/minimize.svg";
+	import Sidebar from "./components/Sidebar.svelte";
+	import { onMount, type SvelteComponent } from "svelte";
+	import LibraryPage from "./pages/Library.svelte";
+	import Library from "./components/icons/Library.svelte";
+	import Settings from "./components/icons/Settings.svelte";
+	import Community from "./components/icons/Community.svelte";
+	import Globe from "./components/icons/Globe.svelte";
+	import QA from "./components/icons/QA.svelte";
+
+	let Page: typeof SvelteComponent<{}>;
+	let tbMain: HTMLDivElement;
+	let tbFiller: HTMLDivElement;
+	let windowEl: HTMLDivElement;
+	let downPos: { x: number; y: number };
+
+	function changePage(e: CustomEvent<{ page: typeof SvelteComponent<{}> }>) {
+		Page = e.detail.page;
+	}
+
+	onMount(() => {
+		const left = Math.round((window.innerWidth - windowEl.offsetWidth) / 2);
+		const top = Math.round((window.innerHeight - windowEl.offsetHeight) / 2);
+		windowEl.style.left = `${left % 2 === 0 ? left : left + 1}px`;
+		windowEl.style.top = `${top % 2 === 0 ? top : top + 1}px`;
+
+		function onMove(e: MouseEvent) {
+			windowEl.style.left = `${windowEl.offsetLeft + e.clientX - downPos.x}px`;
+			windowEl.style.top = `${windowEl.offsetTop + e.clientY - downPos.y}px`;
+			downPos = { x: e.clientX, y: e.clientY };
+		}
+
+		function onMouseDown(e: MouseEvent) {
+			downPos = { x: e.clientX, y: e.clientY };
+			document.addEventListener("mousemove", onMove);
+			document.addEventListener("mouseup", onMouseUp);
+		}
+
+		function onMouseUp(e: MouseEvent) {
+			document.removeEventListener("mousemove", onMove);
+			document.removeEventListener("mouseup", onMouseUp);
+		}
+
+		tbFiller.addEventListener("mousedown", onMouseDown);
+		tbMain.addEventListener("mousedown", onMouseDown);
+
+		return () => {
+			document.removeEventListener("mousemove", onMove);
+			document.removeEventListener("mouseup", onMouseUp);
+			tbFiller.removeEventListener("mousedown", onMouseDown);
+			tbMain.removeEventListener("mousedown", onMouseDown);
+		};
+	});
+</script>
+
+<div class="root">
+	<div class="window mica-backdrop" bind:this={windowEl}>
+		<div class="window-contents">
+			<div class="titlebar-sidebar">
+				<div bind:this={tbMain} class="titlebar on-mica-bg">
+					<div class="titlebar-contents">
+						<div class="icon">
+							<Logo size={16} />
+						</div>
+						<div class="title">suyu | dev-1574a6818</div>
+					</div>
+				</div>
+				<div class="sidebar on-mica-bg">
+					<Sidebar
+						itemsTop={[
+							{
+								icon: Library,
+								text: "Library",
+							},
+							{
+								icon: Settings,
+								text: "Settings",
+							},
+							{
+								icon: Community,
+								text: "Multiplayer",
+							},
+						]}
+						itemsBottom={[
+							{
+								text: "Offical Website",
+								icon: Globe,
+								onclick: () => window.open("https://suyu.dev", "_blank"),
+							},
+							{
+								text: "Discord",
+								icon: QA,
+								onclick: () => window.open("https://discord.gg/suyu", "_blank"),
+							},
+						]}
+						on:changepage={changePage}
+					/>
+				</div>
+			</div>
+			<div class="filler-with-content">
+				<div bind:this={tbFiller} class="titlebar-filler on-mica-bg">
+					<div class="titlebar-buttons">
+						<div class="tb-button">
+							<img src={minimize} alt="Minimize" />
+						</div>
+						<div class="tb-button">
+							<img src={maximize} alt="Maximize" />
+						</div>
+						<div class="tb-button close">
+							<img src={close} alt="Close" />
+						</div>
+					</div>
+				</div>
+				<div class="window-body">
+					<svelte:component this={Page || LibraryPage} />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	@keyframes window-appear {
+		from {
+			opacity: 0;
+			transform: scale(0.85);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	.window-body {
+		flex-grow: 1;
+	}
+
+	.filler-with-content {
+		flex-grow: 1;
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.titlebar-sidebar {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: 250px;
+	}
+
+	.titlebar-filler {
+		height: 40px;
+		border-bottom: var(--fluent-stroke);
+		flex-shrink: 0;
+	}
+
+	.window-contents {
+		width: 100%;
+		height: 100%;
+		display: flex;
+	}
+
+	.sidebar {
+		height: 100%;
+		flex-grow: 1;
+		border-right: var(--fluent-stroke);
+	}
+
+	.titlebar-contents {
+		display: flex;
+		height: 40px;
+		padding: 10px 8px;
+	}
+
+	.title {
+		margin-top: -3px;
+		margin-left: 8px;
+		font-size: 14px;
+	}
+
+	.root {
+		width: 100vw;
+		height: 100vh;
+		background-image: url($assets/mockups/Screenshot.png);
+		background-position: bottom center;
+	}
+
+	.window {
+		width: 1012px;
+		height: 600px;
+		position: absolute;
+		opacity: 0;
+		animation: window-appear forwards 0.3s 1s var(--fluent-ease-out);
+	}
+
+	.titlebar-buttons {
+		position: absolute;
+		right: 0;
+		top: 0;
+		display: flex;
+	}
+
+	.tb-button {
+		width: 46px;
+		height: 30px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

src/routes/mockup/w11/components/Card.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import More from "./icons/More.svelte";
+	import smo from "$assets/mockups/smo.png";
+</script>
+
+<div class="card-container">
+	<div class="card-content">
+		<div class="card-image">
+			<img src={smo} alt="smo" />
+		</div>
+		<div class="card-body">
+			<div class="title">Super Mario Odyssey</div>
+			<div class="card-stats">1.1 KB • 382 hours</div>
+		</div>
+	</div>
+	<button class="card-more">
+		<More size={16} />
+		<span>More</span>
+	</button>
+</div>
+
+<style>
+	.title {
+		font-size: 14px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-weight: 500;
+	}
+
+	.card-body {
+		width: 100%;
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		font-size: 13px;
+		gap: 2px;
+	}
+
+	.card-stats {
+		opacity: 0.5;
+		font-size: 11px;
+	}
+
+	.card-image {
+		width: 100%;
+		height: 108px;
+		overflow: hidden;
+		flex-shrink: 0;
+		overflow: hidden;
+		border-radius: 4px;
+		border: var(--fluent-stroke);
+	}
+
+	.card-image img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		filter: blur(0.5px);
+	}
+
+	.card-content {
+		flex-grow: 1;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.card-container {
+		width: 128px;
+		height: 204px;
+		border-radius: 10px;
+		border: var(--fluent-stroke);
+		position: relative;
+		padding: 8px;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.card-more {
+		width: 100%;
+		height: 26px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+	}
+</style>

src/routes/mockup/w11/components/Sidebar.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { createEventDispatcher, type SvelteComponent } from "svelte";
+
+	interface SidebarItem {
+		icon: typeof SvelteComponent<{}>;
+		text: string;
+		onclick?: () => void;
+	}
+
+	let itemIndex = 0;
+
+	export let itemsTop: SidebarItem[];
+
+	export let itemsBottom: SidebarItem[];
+
+	const dispatcher = createEventDispatcher<{
+		changepage: { page: typeof SvelteComponent<{}> };
+	}>();
+
+	async function itemClick(item: SidebarItem) {
+		if (item.onclick) return item.onclick();
+
+		try {
+			const page = await import(`../pages/${item.text}.svelte`);
+			dispatcher("changepage", { page: page.default });
+			itemIndex = Array.prototype.concat(itemsTop, itemsBottom).indexOf(item);
+		} catch {
+			console.error(`Page not found: ${item.text}`);
+		}
+	}
+</script>
+
+<div class="sidebar">
+	<div class="sidebar-content top">
+		{#each itemsTop as item}
+			<button
+				on:click={() => {
+					itemClick(item);
+				}}
+				class="sidebar-item fluent-press"
+			>
+				<svelte:component this={item.icon} size={16} />
+				<p>{item.text}</p>
+			</button>
+		{/each}
+	</div>
+	<div class="sidebar-content bottom">
+		{#each itemsBottom as item}
+			<button
+				on:click={() => {
+					itemClick(item);
+				}}
+				class="sidebar-item fluent-press"
+			>
+				<svelte:component this={item.icon} size={16} />
+				<p>{item.text}</p>
+			</button>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.sidebar {
+		display: flex;
+		flex-direction: column;
+		padding-bottom: 5px;
+		height: 100%;
+	}
+
+	.sidebar-content {
+		display: flex;
+		flex-direction: column;
+		padding: 0 4px;
+		gap: 4px;
+	}
+
+	.sidebar-content.top {
+		flex-grow: 1;
+	}
+
+	.sidebar-content.bottom {
+		flex-shrink: 0;
+	}
+
+	.sidebar-item {
+		appearance: none;
+		display: flex;
+		align-items: center;
+		height: 36px;
+		padding: 0 12px;
+		gap: 10px;
+		border-radius: 6px;
+		cursor: pointer;
+		border: none;
+		background-color: transparent;
+	}
+
+	.sidebar-item:hover {
+		background-color: rgba(200, 197, 197, 0.1);
+		filter: none;
+	}
+
+	.sidebar-item:active {
+		background-color: rgba(154, 154, 154, 0.15);
+		filter: none;
+	}
+
+	.sidebar-item > p {
+		font-size: 14px !important;
+		margin-top: -2px;
+	}
+</style>

src/routes/mockup/w11/components/icons/Community.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let size: number = 24;
+</script>
+
+<svg width={size} height={size} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M14.75 15c.966 0 1.75.784 1.75 1.75l-.001.962c.117 2.19-1.511 3.297-4.432 3.297-2.91 0-4.567-1.09-4.567-3.259v-1c0-.966.784-1.75 1.75-1.75h5.5Zm0 1.5h-5.5a.25.25 0 0 0-.25.25v1c0 1.176.887 1.759 3.067 1.759 2.168 0 2.995-.564 2.933-1.757V16.75a.25.25 0 0 0-.25-.25Zm-11-6.5h4.376a4.007 4.007 0 0 0-.095 1.5H3.75a.25.25 0 0 0-.25.25v1c0 1.176.887 1.759 3.067 1.759.462 0 .863-.026 1.207-.077a2.743 2.743 0 0 0-1.173 1.576l-.034.001C3.657 16.009 2 14.919 2 12.75v-1c0-.966.784-1.75 1.75-1.75Zm16.5 0c.966 0 1.75.784 1.75 1.75l-.001.962c.117 2.19-1.511 3.297-4.432 3.297l-.169-.002a2.755 2.755 0 0 0-1.218-1.606c.387.072.847.108 1.387.108 2.168 0 2.995-.564 2.933-1.757V11.75a.25.25 0 0 0-.25-.25h-4.28a4.05 4.05 0 0 0-.096-1.5h4.376ZM12 8a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM6.5 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm11 0a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-11 1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm11 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
+		fill="#fff"
+	/></svg
+>

src/routes/mockup/w11/components/icons/Globe.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let size: number = 24;
+</script>
+
+<svg width={size} height={size} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999ZM14.939 16.5H9.06c.652 2.414 1.786 4.002 2.939 4.002s2.287-1.588 2.939-4.002Zm-7.43 0H4.785a8.532 8.532 0 0 0 4.094 3.411c-.522-.82-.953-1.846-1.27-3.015l-.102-.395Zm11.705 0h-2.722c-.324 1.335-.792 2.5-1.373 3.411a8.528 8.528 0 0 0 3.91-3.127l.185-.283ZM7.094 10H3.735l-.005.017a8.525 8.525 0 0 0-.233 1.984c0 1.056.193 2.067.545 3h3.173a20.847 20.847 0 0 1-.123-5Zm8.303 0H8.603a18.966 18.966 0 0 0 .135 5h6.524a18.974 18.974 0 0 0 .135-5Zm4.868 0h-3.358c.062.647.095 1.317.095 2a20.3 20.3 0 0 1-.218 3h3.173a8.482 8.482 0 0 0 .544-3c0-.689-.082-1.36-.236-2ZM8.88 4.09l-.023.008A8.531 8.531 0 0 0 4.25 8.5h3.048c.314-1.752.86-3.278 1.583-4.41ZM12 3.499l-.116.005C10.62 3.62 9.396 5.622 8.83 8.5h6.342c-.566-2.87-1.783-4.869-3.045-4.995L12 3.5Zm3.12.59.107.175c.669 1.112 1.177 2.572 1.475 4.237h3.048a8.533 8.533 0 0 0-4.339-4.29l-.291-.121Z"
+		fill="#fff"
+	/></svg
+>

src/routes/mockup/w11/components/icons/Library.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let size: number = 24;
+</script>
+
+<svg width={size} height={size} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M4 3h1c1.054 0 1.918.816 1.995 1.85L7 5v14a2.001 2.001 0 0 1-1.85 1.994L5 21H4a2.001 2.001 0 0 1-1.995-1.85L2 19V5c0-1.054.816-1.918 1.85-1.995L4 3h1-1Zm6 0h1c1.054 0 1.918.816 1.995 1.85L13 5v14a2.001 2.001 0 0 1-1.85 1.994L11 21h-1a2.001 2.001 0 0 1-1.995-1.85L8 19V5c0-1.054.816-1.918 1.85-1.995L10 3h1-1Zm6.974 2c.84 0 1.608.531 1.89 1.346l.047.157 3.015 11.745a2 2 0 0 1-1.296 2.392l-.144.043-.969.248a2.002 2.002 0 0 1-2.387-1.284l-.047-.155-3.016-11.745a2 2 0 0 1 1.298-2.392l.143-.043.968-.248c.166-.043.334-.064.498-.064ZM5 4.5H4a.501.501 0 0 0-.492.41L3.5 5v14c0 .244.177.45.41.492L4 19.5h1c.245 0 .45-.178.492-.41L5.5 19V5a.501.501 0 0 0-.41-.492L5 4.5Zm6 0h-1a.501.501 0 0 0-.492.41L9.5 5v14c0 .244.177.45.41.492l.09.008h1c.245 0 .45-.178.492-.41L11.5 19V5a.501.501 0 0 0-.41-.492L11 4.5Zm5.975 2-.063.004-.063.013-.968.247a.498.498 0 0 0-.376.51l.015.1 3.016 11.745a.5.5 0 0 0 .483.375l.063-.003.062-.012.97-.25a.5.5 0 0 0 .374-.519l-.015-.088-3.015-11.747a.501.501 0 0 0-.483-.375Z"
+		fill="#fff"
+	/></svg
+>

src/routes/mockup/w11/components/icons/More.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let size: number = 24;
+</script>
+
+<svg width={size} height={size} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M8 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM18 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+		fill="#ffffff"
+	/></svg
+>

src/routes/mockup/w11/components/icons/QA.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let size: number = 24;
+</script>
+
+<svg width={size} height={size} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M8.144 6.307c.434-.232.901-.306 1.356-.306.526 0 1.138.173 1.632.577.517.424.868 1.074.868 1.922 0 .975-.689 1.504-1.077 1.802l-.085.066c-.424.333-.588.511-.588.882a.75.75 0 0 1-1.5 0c0-1.134.711-1.708 1.162-2.062.513-.403.588-.493.588-.688 0-.397-.149-.622-.32-.761A1.115 1.115 0 0 0 9.5 7.5c-.295 0-.498.049-.65.13-.143.076-.294.21-.44.48a.75.75 0 1 1-1.32-.715c.264-.486.612-.853 1.054-1.089ZM9.5 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+		fill="#fff"
+	/><path
+		d="M9.5 3a7.5 7.5 0 0 0-6.797 10.673l-.725 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.5 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.243-.121-.265.063-2.788.667c.2-.78.462-1.812.69-2.708l.07-.276-.13-.253A5.971 5.971 0 0 1 3.5 10.5Z"
+		fill="#fff"
+	/><path
+		d="M14.5 21c-1.97 0-3.761-.759-5.1-2h.1c.718 0 1.415-.089 2.081-.257.864.482 1.86.757 2.92.757.96 0 1.866-.225 2.669-.625l.243-.121.265.063c.921.22 1.965.445 2.74.61-.176-.751-.415-1.756-.642-2.651l-.07-.276.13-.253A5.971 5.971 0 0 0 20.5 13.5a5.995 5.995 0 0 0-2.747-5.042 8.443 8.443 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.51 2.1.672 2.803a1.244 1.244 0 0 1-1.468 1.5c-.727-.152-1.87-.396-2.913-.64A7.476 7.476 0 0 1 14.5 21Z"
+		fill="#fff"
+	/></svg
+>

src/routes/mockup/w11/components/icons/Settings.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let size: number = 24;
+</script>
+
+<svg width={size} height={size} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M12.012 2.25c.734.008 1.465.093 2.182.253a.75.75 0 0 1 .582.649l.17 1.527a1.384 1.384 0 0 0 1.927 1.116l1.401-.615a.75.75 0 0 1 .85.174 9.792 9.792 0 0 1 2.204 3.792.75.75 0 0 1-.271.825l-1.242.916a1.381 1.381 0 0 0 0 2.226l1.243.915a.75.75 0 0 1 .272.826 9.797 9.797 0 0 1-2.204 3.792.75.75 0 0 1-.848.175l-1.407-.617a1.38 1.38 0 0 0-1.926 1.114l-.169 1.526a.75.75 0 0 1-.572.647 9.518 9.518 0 0 1-4.406 0 .75.75 0 0 1-.572-.647l-.168-1.524a1.382 1.382 0 0 0-1.926-1.11l-1.406.616a.75.75 0 0 1-.849-.175 9.798 9.798 0 0 1-2.204-3.796.75.75 0 0 1 .272-.826l1.243-.916a1.38 1.38 0 0 0 0-2.226l-1.243-.914a.75.75 0 0 1-.271-.826 9.793 9.793 0 0 1 2.204-3.792.75.75 0 0 1 .85-.174l1.4.615a1.387 1.387 0 0 0 1.93-1.118l.17-1.526a.75.75 0 0 1 .583-.65c.717-.159 1.45-.243 2.201-.252Zm0 1.5a9.135 9.135 0 0 0-1.354.117l-.109.977A2.886 2.886 0 0 1 6.525 7.17l-.898-.394a8.293 8.293 0 0 0-1.348 2.317l.798.587a2.881 2.881 0 0 1 0 4.643l-.799.588c.32.842.776 1.626 1.348 2.322l.905-.397a2.882 2.882 0 0 1 4.017 2.318l.11.984c.889.15 1.798.15 2.687 0l.11-.984a2.881 2.881 0 0 1 4.018-2.322l.905.396a8.296 8.296 0 0 0 1.347-2.318l-.798-.588a2.881 2.881 0 0 1 0-4.643l.796-.587a8.293 8.293 0 0 0-1.348-2.317l-.896.393a2.884 2.884 0 0 1-4.023-2.324l-.11-.976a8.988 8.988 0 0 0-1.333-.117ZM12 8.25a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm0 1.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
+		fill="#fff"
+	/></svg
+>

src/routes/mockup/w11/pages/Library.svelte

@@ -0,0 +1,24 @@
+<script>
+	import Card from "../components/Card.svelte";
+</script>
+
+<div class="cards">
+	<Card />
+	<Card />
+	<Card />
+	<Card />
+	<Card />
+	<Card />
+	<Card />
+	<Card />
+	<Card />
+</div>
+
+<style>
+	.cards {
+		padding: 20px;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, 128px);
+		grid-gap: 20px;
+	}
+</style>

src/routes/mockup/w11/pages/Settings.svelte

@@ -0,0 +1 @@
+bb