Mobile UI updated (#10)

* Mobile svg imported * Refactor and mobile menu * Mobile dedicated window
ARK-Builders · Oct 24, 2024 · 60cbba0 · 60cbba0
1 parent 56ff036
commit 60cbba0
Show file tree

Hide file tree

Showing 16 changed files with 1,089 additions and 119 deletions.
diff --git a/src/lib/assets/images/left.svelte b/src/lib/assets/images/left.svelte
diff --git a/src/lib/assets/images/mob-left.svelte b/src/lib/assets/images/mob-left.svelte
diff --git a/src/lib/assets/images/mob-right.svelte b/src/lib/assets/images/mob-right.svelte
diff --git a/src/lib/assets/images/right.svelte b/src/lib/assets/images/right.svelte
@@ -0,0 +1,356 @@
+<svg width="255" height="637" viewBox="0 0 255 637" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="72" width="64" height="64" rx="8" fill="#D5D5D5" />
+	<rect x="72" y="71" width="64" height="64" rx="8" fill="#D5D5D5" />
+	<rect x="216" y="71" width="64" height="64" rx="8" fill="#D5D5D5" />
+	<rect x="216" y="217" width="64" height="64" rx="8" fill="#D5D5D5" />
+	<rect y="358" width="64" height="64" rx="8" fill="#D5D5D5" />
+	<rect x="144" y="71" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="72" y="287" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="144" y="358" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="144" y="429" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="216" y="504" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="144" y="573" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="72" y="503" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="144" y="287" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="216" y="358" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<rect x="216" y="144" width="64" height="64" rx="8" fill="#F5F4F2" />
+	<g clip-path="url(#clip0_214_1345)">
+		<rect x="88" y="211" width="96" height="96" rx="12" fill="#5D0B27" />
+		<path d="M110 293L135.588 267.254V226L110 231.814V293Z" fill="url(#paint0_linear_214_1345)" />
+		<path
+			d="M161.176 293L135.588 267.254L110 293L135.588 277.639L161.176 293Z"
+			fill="url(#paint1_linear_214_1345)"
+		/>
+		<path
+			d="M161.176 293V229.877L135.588 226V267.254L161.176 293Z"
+			fill="url(#paint2_linear_214_1345)"
+		/>
+	</g>
+	<g clip-path="url(#clip1_214_1345)">
+		<rect x="98" y="461" width="92" height="92" rx="11.5" fill="#601384" />
+		<mask
+			id="mask0_214_1345"
+			style="mask-type:luminance"
+			maskUnits="userSpaceOnUse"
+			x="120"
+			y="473"
+			width="56"
+			height="87"
+		>
+			<path d="M175.993 473H120V559.7H175.993V473Z" fill="white" />
+		</mask>
+		<g mask="url(#mask0_214_1345)">
+			<path
+				d="M162.288 486.283L140.331 473L140.542 479.596C127.831 481.614 120.256 495.424 120.151 499.43C120.136 499.912 119.533 513.255 120.858 516.056C121.416 517.171 122.169 518.165 123.057 519.023L124.97 517.276L129.834 512.803C128.765 511.93 127.816 510.876 127.063 509.596C127.033 509.52 127.018 509.445 126.988 509.355C133.238 503.481 140.512 501.945 142.981 501.584L143.222 503.767L144.382 506.463L163.463 488.964L162.288 486.283ZM120.738 514.852C120.753 515.198 120.783 515.469 120.798 515.68C120.753 515.409 120.738 515.123 120.738 514.852Z"
+				fill="url(#paint3_linear_214_1345)"
+			/>
+			<path
+				d="M129.834 512.803L124.97 517.276C123.901 516.132 123.057 514.49 123.991 513.014C124.985 511.433 125.587 510.695 126.958 509.4C127.711 510.77 128.705 511.885 129.834 512.803Z"
+				fill="url(#paint4_linear_214_1345)"
+			/>
+			<path
+				d="M162.288 486.283L143.222 503.767L142.981 501.584L142.68 498.783C142.68 498.783 133.479 499.475 125.828 506.659C124.006 508.376 119.955 511.388 120.858 516.041C119.533 513.255 120.136 499.912 120.151 499.43C120.256 495.424 127.831 481.614 140.542 479.596L140.331 473L162.288 486.283Z"
+				fill="url(#paint5_linear_214_1345)"
+			/>
+			<path
+				d="M121.913 523.827L143.87 537.11L143.659 530.514C156.355 528.496 163.945 514.686 164.05 510.68C164.065 510.198 164.668 496.855 163.343 494.054C162.785 492.939 162.032 491.945 161.144 491.087L159.246 492.834L154.382 497.307C155.451 498.18 156.4 499.234 157.153 500.515C157.183 500.59 157.198 500.665 157.228 500.756C150.978 506.629 143.704 508.165 141.235 508.526L140.994 506.343L139.834 503.647L120.753 521.132L121.913 523.827ZM163.478 495.244C163.463 494.897 163.433 494.626 163.418 494.415C163.448 494.701 163.463 494.972 163.478 495.244Z"
+				fill="url(#paint6_linear_214_1345)"
+			/>
+			<path
+				d="M154.382 497.292L159.246 492.819C160.315 493.963 161.159 495.605 160.225 497.081C159.231 498.662 158.629 499.4 157.258 500.695C156.49 499.34 155.511 498.225 154.382 497.292Z"
+				fill="url(#paint7_linear_214_1345)"
+			/>
+			<path
+				d="M121.913 523.827L140.994 506.328L141.235 508.511L141.536 511.312C141.536 511.312 150.737 510.62 158.388 503.436C160.21 501.719 164.261 498.707 163.358 494.054C164.683 496.855 164.08 510.183 164.065 510.68C163.96 514.686 156.37 528.511 143.674 530.514L143.885 537.11L121.913 523.827Z"
+				fill="url(#paint8_linear_214_1345)"
+			/>
+			<path
+				d="M160.225 535.453C155.165 535.453 150.722 533.902 148.328 531.613C147.153 530.484 146.46 529.174 146.445 527.773C146.385 523.541 152.454 520.107 159.999 520.107C167.544 520.107 173.719 523.556 173.779 527.788C173.794 529.189 173.162 530.499 172.002 531.628C169.683 533.932 165.285 535.469 160.225 535.453Z"
+				fill="url(#paint9_linear_214_1345)"
+			/>
+			<path
+				d="M160.285 539.7C152.74 539.7 146.566 536.252 146.506 532.02L146.445 527.773C146.46 529.174 147.153 530.484 148.328 531.613C150.722 533.902 155.165 535.454 160.225 535.454C165.285 535.454 169.683 533.917 172.002 531.628C173.147 530.499 173.794 529.189 173.779 527.788L173.839 532.035C173.9 536.282 167.83 539.715 160.285 539.7Z"
+				fill="url(#paint10_linear_214_1345)"
+			/>
+			<path
+				d="M169.969 528.571C169.607 525.649 165.255 523.315 159.954 523.315C154.924 523.315 150.798 525.409 150.18 528.119C150.165 528.014 150.165 527.893 150.15 527.773C150.105 524.686 154.517 522.186 160.014 522.201C165.511 522.201 169.999 524.716 170.044 527.803C170.059 528.059 170.029 528.315 169.969 528.571Z"
+				fill="url(#paint11_linear_214_1345)"
+			/>
+			<path
+				d="M160.195 533.375C156.52 533.375 153.282 532.246 151.536 530.574C150.767 529.836 150.301 529.008 150.18 528.119C150.813 525.393 154.924 523.3 159.954 523.315C165.24 523.315 169.607 525.649 169.969 528.571C169.803 529.294 169.382 529.987 168.764 530.589C167.077 532.261 163.87 533.375 160.195 533.375Z"
+				fill="url(#paint12_linear_214_1345)"
+			/>
+			<path
+				d="M162.379 529.656C157.319 529.656 152.876 528.104 150.481 525.815C149.307 524.686 148.614 523.376 148.599 521.975C148.539 517.743 154.608 514.309 162.153 514.309C169.698 514.309 175.872 517.758 175.933 521.99C175.948 523.391 175.315 524.701 174.156 525.83C171.821 528.119 167.439 529.656 162.379 529.656Z"
+				fill="url(#paint13_linear_214_1345)"
+			/>
+			<path
+				d="M162.439 533.902C154.894 533.902 148.719 530.454 148.659 526.222L148.599 521.975C148.614 523.375 149.307 524.686 150.481 525.815C152.876 528.104 157.319 529.655 162.379 529.655C167.439 529.655 171.836 528.119 174.156 525.83C175.3 524.701 175.948 523.39 175.933 521.99L175.993 526.237C176.053 530.469 169.984 533.902 162.439 533.902Z"
+				fill="url(#paint14_linear_214_1345)"
+			/>
+			<path
+				d="M172.122 522.758C171.761 519.836 167.409 517.502 162.108 517.502C157.078 517.502 152.951 519.595 152.334 522.306C152.319 522.201 152.319 522.08 152.304 521.96C152.258 518.873 156.671 516.373 162.168 516.388C167.665 516.388 172.153 518.903 172.198 521.99C172.213 522.246 172.183 522.502 172.122 522.758Z"
+				fill="url(#paint15_linear_214_1345)"
+			/>
+			<path
+				d="M162.349 527.562C158.674 527.562 155.436 526.433 153.689 524.761C152.921 524.023 152.454 523.195 152.334 522.306C152.966 519.58 157.078 517.487 162.108 517.502C167.394 517.502 171.761 519.836 172.122 522.758C171.957 523.481 171.535 524.174 170.918 524.776C169.231 526.448 166.023 527.562 162.349 527.562Z"
+				fill="url(#paint16_linear_214_1345)"
+			/>
+			<path
+				d="M158.915 524.309C153.855 524.309 149.412 522.758 147.018 520.469C145.843 519.339 145.15 518.029 145.135 516.629C145.075 512.397 151.144 508.963 158.689 508.963C166.234 508.963 172.409 512.412 172.469 516.644C172.484 518.044 171.851 519.354 170.692 520.484C168.373 522.773 163.975 524.309 158.915 524.309Z"
+				fill="url(#paint17_linear_214_1345)"
+			/>
+			<path
+				d="M158.99 528.556C151.445 528.556 145.271 525.107 145.21 520.876L145.15 516.629C145.165 518.029 145.858 519.339 147.033 520.469C149.427 522.758 153.87 524.309 158.93 524.309C163.99 524.309 168.388 522.773 170.707 520.484C171.851 519.355 172.499 518.044 172.484 516.644L172.544 520.891C172.604 525.138 166.535 528.556 158.99 528.556Z"
+				fill="url(#paint18_linear_214_1345)"
+			/>
+			<path
+				d="M168.674 517.412C168.312 514.49 163.96 512.156 158.659 512.156C153.629 512.156 149.502 514.249 148.885 516.96C148.87 516.854 148.87 516.734 148.855 516.614C148.81 513.526 153.222 511.026 158.719 511.041C164.216 511.041 168.704 513.556 168.749 516.644C168.749 516.9 168.734 517.156 168.674 517.412Z"
+				fill="url(#paint19_linear_214_1345)"
+			/>
+			<path
+				d="M158.885 522.216C155.21 522.216 151.972 521.086 150.225 519.415C149.457 518.677 148.99 517.848 148.87 516.96C149.502 514.234 153.614 512.141 158.644 512.156C163.93 512.156 168.297 514.49 168.659 517.412C168.493 518.135 168.071 518.827 167.454 519.43C165.767 521.101 162.574 522.216 158.885 522.216Z"
+				fill="url(#paint20_linear_214_1345)"
+			/>
+		</g>
+	</g>
+	<defs>
+		<linearGradient
+			id="paint0_linear_214_1345"
+			x1="122.793"
+			y1="290.292"
+			x2="122.793"
+			y2="222.253"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#E51F40" />
+			<stop offset="1" stop-color="#660E3A" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_214_1345"
+			x1="135.583"
+			y1="293.438"
+			x2="135.808"
+			y2="269.922"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#E51F40" />
+			<stop offset="1" stop-color="#660E3A" />
+		</linearGradient>
+		<linearGradient
+			id="paint2_linear_214_1345"
+			x1="149.029"
+			y1="225.662"
+			x2="147.875"
+			y2="285.989"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#E51F40" />
+			<stop offset="1" stop-color="#660E3A" />
+		</linearGradient>
+		<linearGradient
+			id="paint3_linear_214_1345"
+			x1="117.774"
+			y1="516.134"
+			x2="137.776"
+			y2="495.529"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#CB28FF" />
+			<stop offset="1" stop-color="#7409C0" />
+		</linearGradient>
+		<linearGradient
+			id="paint4_linear_214_1345"
+			x1="128.499"
+			y1="514.311"
+			x2="123.8"
+			y2="512.512"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#CB28FF" />
+			<stop offset="1" stop-color="#7409C0" />
+		</linearGradient>
+		<linearGradient
+			id="paint5_linear_214_1345"
+			x1="153.739"
+			y1="483.862"
+			x2="119.259"
+			y2="499.752"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#CB28FF" />
+			<stop offset="1" stop-color="#7409C0" />
+		</linearGradient>
+		<linearGradient
+			id="paint6_linear_214_1345"
+			x1="167.868"
+			y1="498.581"
+			x2="130.686"
+			y2="529.724"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#CB28FF" />
+			<stop offset="1" stop-color="#7409C0" />
+		</linearGradient>
+		<linearGradient
+			id="paint7_linear_214_1345"
+			x1="155.706"
+			y1="495.794"
+			x2="160.405"
+			y2="497.593"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#CB28FF" />
+			<stop offset="1" stop-color="#7409C0" />
+		</linearGradient>
+		<linearGradient
+			id="paint8_linear_214_1345"
+			x1="130.09"
+			y1="525.659"
+			x2="162.346"
+			y2="511.835"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#CB28FF" />
+			<stop offset="1" stop-color="#7409C0" />
+		</linearGradient>
+		<linearGradient
+			id="paint9_linear_214_1345"
+			x1="147.311"
+			y1="528.347"
+			x2="172.745"
+			y2="527.23"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint10_linear_214_1345"
+			x1="172.292"
+			y1="533.71"
+			x2="147.845"
+			y2="533.747"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint11_linear_214_1345"
+			x1="175.614"
+			y1="523.706"
+			x2="153.286"
+			y2="527.025"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint12_linear_214_1345"
+			x1="155.701"
+			y1="534.853"
+			x2="165.674"
+			y2="520.016"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint13_linear_214_1345"
+			x1="149.461"
+			y1="522.537"
+			x2="174.895"
+			y2="521.419"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint14_linear_214_1345"
+			x1="174.442"
+			y1="527.899"
+			x2="149.995"
+			y2="527.936"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint15_linear_214_1345"
+			x1="177.764"
+			y1="517.895"
+			x2="155.436"
+			y2="521.214"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint16_linear_214_1345"
+			x1="157.851"
+			y1="529.043"
+			x2="167.824"
+			y2="514.205"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint17_linear_214_1345"
+			x1="146.006"
+			y1="517.192"
+			x2="171.439"
+			y2="516.075"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint18_linear_214_1345"
+			x1="170.986"
+			y1="522.555"
+			x2="146.539"
+			y2="522.592"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint19_linear_214_1345"
+			x1="174.308"
+			y1="512.551"
+			x2="151.981"
+			y2="515.87"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<linearGradient
+			id="paint20_linear_214_1345"
+			x1="154.396"
+			y1="523.698"
+			x2="164.369"
+			y2="508.861"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F9C232" />
+			<stop offset="1" stop-color="#F38D11" />
+		</linearGradient>
+		<clipPath id="clip0_214_1345">
+			<rect width="96" height="96" fill="white" transform="translate(88 211)" />
+		</clipPath>
+		<clipPath id="clip1_214_1345">
+			<rect width="92" height="92" fill="white" transform="translate(98 461)" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/src/lib/components/AppMenus.svelte b/src/lib/components/AppMenus.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
 	import { base } from '$app/paths'
 	import MenuItem from '$lib/components/elements/MenuItem.svelte'
-	import { appList } from '$utils/constants'
+	import { appList, currentApps } from '$utils/constants'
 	import Icon from '@iconify/svelte'
 
 	export let link
-
-	const currentApps = appList.slice(0, 3)
 </script>
 
 <div class="menus">

diff --git a/src/lib/components/GetStarted.svelte b/src/lib/components/GetStarted.svelte
@@ -7,6 +7,7 @@
 </script>
 
 <a
+	on:click
 	href="{base}{href}"
 	class="{bgOrange
 		? 'bg-arkOrange hover:bg-arkOrangeDeep'

diff --git a/src/lib/components/elements/AppsCard.svelte b/src/lib/components/elements/AppsCard.svelte
@@ -1,18 +1,9 @@
 <script lang="ts">
 	import { base } from '$app/paths'
-	import RateLogo from '$lib/assets/images/app-logos/rate.svelte'
-	import MemoLogo from '$lib/assets/images/app-logos/memo.svelte'
-	import RetouchLogo from '$lib/assets/images/app-logos/retouch.svelte'
-	import type { ComponentType } from 'svelte'
 	import MemoImage1 from '$lib/assets/images/apps/memo/1.png'
+	import { appLogos } from '$utils/constants'
 
 	export let app: any
-
-	const appLogos: Record<string, ComponentType> = {
-		rate: RateLogo,
-		memo: MemoLogo,
-		retouch: RetouchLogo
-	}
 </script>
 
 <div class="flex flex-col gap-3 rounded-xl bg-arkGray5 p-5">