add windows 11 demo
This commit is contained in:
not-nullptr
parent
da1db64e32
commit
aa8903b508
19 changed files with 590 additions and 2 deletions
BIN
src/assets/fonts/suivar.ttf
Normal file
BIN
src/assets/fonts/suivar.ttf
Normal file
Binary file not shown.
BIN
src/assets/mockups/Screenshot.png
Normal file
BIN
src/assets/mockups/Screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 622 KiB |
3
src/assets/mockups/close.svg
Normal file
3
src/assets/mockups/close.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 394 B |
3
src/assets/mockups/maximize.svg
Normal file
3
src/assets/mockups/maximize.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 461 B |
3
src/assets/mockups/minimize.svg
Normal file
3
src/assets/mockups/minimize.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 225 B |
BIN
src/assets/mockups/smo.png
Normal file
BIN
src/assets/mockups/smo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
69
src/lib/css/fluent.css
Normal file
69
src/lib/css/fluent.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -6,8 +6,8 @@
|
|||
import "$lib/css/index.css";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
const excludedRoutesNav = ["/mockup/boot"];
|
||||
const excludedRoutesBg = ["/mockup"];
|
||||
const excludedRoutesNav = ["/mockup/boot", "/mockup/w11"];
|
||||
const excludedRoutesBg = ["/mockup", "/mockup/w11"];
|
||||
$: isNavExcluded = excludedRoutesNav.some((route) => $page.url?.pathname.startsWith(route));
|
||||
$: isBgExcluded = excludedRoutesBg.some((route) => $page.url?.pathname === route);
|
||||
</script>
|
||||
|
|
|
|||
216
src/routes/mockup/w11/+page.svelte
Normal file
216
src/routes/mockup/w11/+page.svelte
Normal file
|
|
@ -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>
|
||||
91
src/routes/mockup/w11/components/Card.svelte
Normal file
91
src/routes/mockup/w11/components/Card.svelte
Normal file
|
|
@ -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>
|
||||
112
src/routes/mockup/w11/components/Sidebar.svelte
Normal file
112
src/routes/mockup/w11/components/Sidebar.svelte
Normal file
|
|
@ -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>
|
||||
10
src/routes/mockup/w11/components/icons/Community.svelte
Normal file
10
src/routes/mockup/w11/components/icons/Community.svelte
Normal file
|
|
@ -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
|
||||
>
|
||||
10
src/routes/mockup/w11/components/icons/Globe.svelte
Normal file
10
src/routes/mockup/w11/components/icons/Globe.svelte
Normal file
|
|
@ -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
|
||||
>
|
||||
10
src/routes/mockup/w11/components/icons/Library.svelte
Normal file
10
src/routes/mockup/w11/components/icons/Library.svelte
Normal file
|
|
@ -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
|
||||
>
|
||||
10
src/routes/mockup/w11/components/icons/More.svelte
Normal file
10
src/routes/mockup/w11/components/icons/More.svelte
Normal file
|
|
@ -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
|
||||
>
|
||||
16
src/routes/mockup/w11/components/icons/QA.svelte
Normal file
16
src/routes/mockup/w11/components/icons/QA.svelte
Normal file
|
|
@ -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
|
||||
>
|
||||
10
src/routes/mockup/w11/components/icons/Settings.svelte
Normal file
10
src/routes/mockup/w11/components/icons/Settings.svelte
Normal file
|
|
@ -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
|
||||
>
|
||||
24
src/routes/mockup/w11/pages/Library.svelte
Normal file
24
src/routes/mockup/w11/pages/Library.svelte
Normal file
|
|
@ -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>
|
||||
1
src/routes/mockup/w11/pages/Settings.svelte
Normal file
1
src/routes/mockup/w11/pages/Settings.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
bb
|
||||
Loading…
Reference in a new issue