Merge pull request #38 from Erant-s-r-o/profile

profile
This commit is contained in:
Ota-Prokopec 2022-12-12 17:18:21 +01:00 committed by GitHub
commit 3ef616d889
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 252 additions and 84 deletions

View File

@ -11,6 +11,7 @@
import map from './routes/map.svelte'
import LogIn from './routes/log_in.svelte'
import Explore from './routes/explore/explore.svelte'
import Profile from './routes/profile/profile.svelte'
if ('serviceWorker' in window.navigator) {
window.navigator.serviceWorker.register('/serviceworker.js', {
@ -24,12 +25,11 @@
<Router>
<Route path="/" component={Index} />
<Route path="/error" component={Error} />
<Route path="/scanner" component={QrRoute} />
<Route path="/test" component={Test} />
<Route path="/map" component={map} />
<Route path="/explore" component={Explore} />
<Route path="/profile" component={Profile} />
<Route path="/login">
<LogIn />

View File

@ -0,0 +1,7 @@
<script>
import InputPicture from '$lib/svg/InputPicture.svelte'
</script>
<div>
<InputPicture />
</div>

View File

@ -35,15 +35,18 @@
{
name: 'Profile',
active: false,
url: '',
url: '/profile',
image_url:
"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
},
]
let className = ''
export { className as class }
</script>
<div class="h-full w-full absolute">
<div class="section w-full h-[calc(100%-100px)] overflow-auto"><slot /></div>
<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
<div class="footer">
{#each items as { active, name, url, image_url }}
<FooterItem on:click={() => navigate(url)} {active} {name} {url}>

View File

@ -0,0 +1,12 @@
<script>
let className = ''
export { className as class }
</script>
<div class={'w-full h-min ' + className} />
<style>
div {
border-top: 1px solid #efeff0;
}
</style>

View File

@ -0,0 +1,8 @@
<script>
let className = ''
export { className as class }
</script>
<div class={'w-full h-auto flex flex-wrap flex-row justify-normal items-center gap-4 ' + className}>
<slot />
</div>

8
src/lib/svg/Earth.svelte Normal file
View File

@ -0,0 +1,8 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15 2.5C8.1 2.5 2.5 8.1 2.5 15C2.5 21.9 8.1 27.5 15 27.5C21.9 27.5 27.5 21.9 27.5 15C27.5 8.1 21.9 2.5 15 2.5ZM13.75 24.9125C8.8125 24.3 5 20.1 5 15C5 14.225 5.1 13.4875 5.2625 12.7625L11.25 18.75V20C11.25 21.375 12.375 22.5 13.75 22.5V24.9125ZM20 20C21.125 20 22.05 20.725 22.375 21.7375C24 19.9625 25 17.6 25 15C25 10.8125 22.4125 7.225 18.75 5.7375V6.25C18.75 7.625 17.625 8.75 16.25 8.75H13.75V11.25C13.75 11.9375 13.1875 12.5 12.5 12.5H10V15H17.5C18.1875 15 18.75 15.5625 18.75 16.25V20H20Z"
fill="#4263EB"
/>
</svg>

After

Width:  |  Height:  |  Size: 677 B

8
src/lib/svg/Help.svelte Normal file
View File

@ -0,0 +1,8 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15 2.5C8.1 2.5 2.5 8.1 2.5 15C2.5 21.9 8.1 27.5 15 27.5C21.9 27.5 27.5 21.9 27.5 15C27.5 8.1 21.9 2.5 15 2.5ZM13.75 23.75V21.25H16.25V23.75H13.75ZM17.7125 15.2125L18.8375 14.0625C20.1125 12.7875 20.55 10.6 19.075 8.5625C17.95 7 16.1375 6.0125 14.2375 6.3125C12.3 6.6125 10.7375 8.0125 10.2 9.85C10 10.55 10.5 11.25 11.225 11.25H11.6C12.0875 11.25 12.475 10.9 12.625 10.4375C13.0375 9.25 14.325 8.4625 15.7125 8.85C16.5875 9.1 17.2875 9.8625 17.45 10.7625C17.6125 11.6375 17.3375 12.4625 16.7625 13.0125L15.2125 14.5875C14.6875 15.1125 14.275 15.7625 14.025 16.4875C13.85 17 13.75 17.55 13.75 18.125V18.75H16.25C16.25 18.175 16.3125 17.725 16.4125 17.325C16.6375 16.425 17.0875 15.85 17.7125 15.2125Z"
fill="#4263EB"
/>
</svg>

After

Width:  |  Height:  |  Size: 882 B

View File

@ -0,0 +1,27 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" rx="49" fill="#EFEFF0" />
<mask id="mask0_1661_3075" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="40" y="40" width="20" height="20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.0005 40H59.9601V59.9498H40.0005V40Z" fill="white" />
</mask>
<g mask="url(#mask0_1661_3075)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M45.6505 41.5C43.1295 41.5 41.5005 43.227 41.5005 45.899V54.051C41.5005 56.724 43.1295 58.45 45.6505 58.45H54.3005C56.8275 58.45 58.4605 56.724 58.4605 54.051V45.899C58.4605 43.227 56.8275 41.5 54.3005 41.5H45.6505ZM54.3005 59.95H45.6505C42.2705 59.95 40.0005 57.579 40.0005 54.051V45.899C40.0005 42.371 42.2705 40 45.6505 40H54.3005C57.6855 40 59.9605 42.371 59.9605 45.899V54.051C59.9605 57.579 57.6855 59.95 54.3005 59.95Z"
fill="#AFB1B6"
/>
</g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M43.2815 55.1799C43.0955 55.1799 42.9105 55.1119 42.7655 54.9739C42.4645 54.6899 42.4525 54.2139 42.7375 53.9149L44.2655 52.3019C45.0745 51.4429 46.4395 51.4009 47.3025 52.2109L48.2605 53.1829C48.5275 53.4529 48.9615 53.4579 49.2295 53.1939C49.3305 53.0749 51.5085 50.4299 51.5085 50.4299C51.9225 49.9279 52.5065 49.6179 53.1555 49.5539C53.8055 49.4969 54.4365 49.6859 54.9395 50.0989C54.9825 50.1339 55.0215 50.1679 57.2175 52.4229C57.5065 52.7189 57.5015 53.1939 57.2045 53.4829C56.9085 53.7739 56.4325 53.7649 56.1435 53.4689C56.1435 53.4689 54.0945 51.3659 53.9485 51.2239C53.7935 51.0969 53.5445 51.0229 53.2995 51.0469C53.0505 51.0719 52.8265 51.1909 52.6675 51.3839C50.3435 54.2029 50.3155 54.2299 50.2775 54.2669C49.4195 55.1089 48.0345 55.0949 47.1915 54.2349C47.1915 54.2349 46.2615 53.2909 46.2455 53.2719C46.0145 53.0579 45.6025 53.0719 45.3555 53.3329L43.8255 54.9459C43.6775 55.1019 43.4795 55.1799 43.2815 55.1799Z"
fill="#AFB1B6"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M46.5577 46.1289C46.0047 46.1289 45.5547 46.5789 45.5547 47.1329C45.5547 47.6869 46.0047 48.1379 46.5587 48.1379C47.1127 48.1379 47.5637 47.6869 47.5637 47.1329C47.5637 46.5799 47.1127 46.1299 46.5577 46.1289ZM46.5587 49.6379C45.1777 49.6379 44.0547 48.5139 44.0547 47.1329C44.0547 45.7519 45.1777 44.6289 46.5587 44.6289C47.9407 44.6299 49.0637 45.7539 49.0637 47.1329C49.0637 48.5139 47.9397 49.6379 46.5587 49.6379Z"
fill="#AFB1B6"
/>
<rect x="1" y="1" width="98" height="98" rx="49" stroke="#AFB1B6" stroke-width="2" />
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

26
src/lib/svg/Logout.svelte Normal file
View File

@ -0,0 +1,26 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g filter="url(#filter0_i_1625_3311)">
<rect width="30" height="30" fill="url(#pattern0)" />
</g>
<defs>
<filter id="filter0_i_1625_3311" x="0" y="0" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dx="61" dy="4" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.388235 0 0 0 0 0.921569 0 0 0 1 0" />
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1625_3311" />
</filter>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1625_3311" transform="scale(0.0104167)" />
</pattern>
<image
id="image0_1625_3311"
width="96"
height="96"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAADqUlEQVR4nO2dvU8UQRyGH40KjYI22FnYGDpI7kSxM/gRjQmNBUGtLKz8+JNMsLAjojEaYwMROaWy0kRtjFbG00SjhVgMG+C8u5253ZnffbxPMoHA7s7c+8DezOzeDgghhBBCCJGcXQX3HwcmgDFgb/HmdMQf4AWwalR/coaA28A7YKOLykNgJOLr7gqqwEfsw25VluK9dHtmgV/Yh5xXqrECiMFuz+2qwD1gOGJbyuKUdQNC8BEwDNynN8IH91/QM/gIuAEcid2QElmxbkDZdFtvp115ECkDM8axDzUk/J7rhu7J+f2ExzH+4t6gPxVvTkd8wZ12akb1FyJPwGGPYywAV0toy0CS9ya83+MY78toyKDiOw4QkZAAYyTAGAkwRgKMkQBjJMAYCTBGAozJm4oYNKaAk5vfrwAvY1coAY4DuAnFCw0/XwLmgXqsinUKcjQLH+Ai8BQYjVWxBMBxmoefUQGeEEmCBMC0xzbRJEiAP1EkSAAsB2xbugQJgDXCLuaXKkECHFcIu6ZcmgQJcNSBGcIGXhXgGXCoSMUSsEUdOEuYhEncOKFjCRKwk0zCWsA+hSRIwP/UgTMkkiABzUkmQQJak0SCxWzoFHAC2GdQdyc8xwXrm9Uk8Bgn71vexikFjOJmHc8nrNOKbJwwQ85UdspT0KCEn1EB7uZtlErAFIMVfsYlnIiWpBLgM+Xbr7R97eoFGZNKQN99biuAttPdqQSsAo8S1dVNLAKv2m2Q8hQ0h3ucwKBQA67lbZRyHFDH3WVQxb0xjSWsuwgHgeuEPdikhhuI5d7OYjESXiNseG/JCG5AFRL+OnAOj1EwqBfUjiz8kGdPrONGv199d5CA5iQJHySgGcnCBwloJGn4IAHbSR4+SEDGCO5CSkj4NeA0BcIHCchYIGfWsoGsn+/V1WyHBOTfHd1IaeGDBEDYVHmp4YMEhFB6+CAB4Hd3dJTwQQIg/+7oaOGDBGTM01zCIq6fHyV80KckM76zdQF9GvcMumXgdeyKJWAnNRI/e06nIGMkwBgJMEYCjJEAYyTAGAkwRgKMkQBj8gT88DjG0TIaMqjkTUV89jjG3ObXNwXb0il9vY5YLy3g0LfriL3FPlzf0pfriN3CPtiQ0lPriPkwBHzAPljfcidODHHw6Yb+Bi7jVtHrBTasGxCLWeAn9n/hA3cK2k4Ft2aMdcitSt+tI9aMIeAm3dc76sl1xIou6HwM93CKMew+89XT64gJIYQQQghhwD+GY3D/XU+PSgAAAABJRU5ErkJggg=="
/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -0,0 +1,19 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.7086 7.08398C9.90441 7.08398 9.25024 7.73815 9.25024 8.54315C9.25024 9.34732 9.90441 10.0007 10.7086 10.0007C11.5127 10.0007 12.1669 9.34732 12.1669 8.54315C12.1669 7.73815 11.5127 7.08398 10.7086 7.08398ZM10.7086 11.2507C9.21524 11.2507 8.00024 10.0365 8.00024 8.54315C8.00024 7.04898 9.21524 5.83398 10.7086 5.83398C12.2019 5.83398 13.4169 7.04898 13.4169 8.54315C13.4169 10.0365 12.2019 11.2507 10.7086 11.2507Z"
fill="#61646B"
/>
<mask id="mask0_1624_3626" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="1" width="15" height="17">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.83325 1.66699H17.5828V17.917H3.83325V1.66699Z" fill="white" />
</mask>
<g mask="url(#mask0_1624_3626)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.7078 2.91699C7.6061 2.91699 5.08276 5.46449 5.08276 8.59449C5.08276 12.577 9.76943 16.457 10.7078 16.6637C11.6461 16.4562 16.3328 12.5762 16.3328 8.59449C16.3328 5.46449 13.8094 2.91699 10.7078 2.91699ZM10.7078 17.917C9.21276 17.917 3.83276 13.2903 3.83276 8.59449C3.83276 4.77449 6.91693 1.66699 10.7078 1.66699C14.4986 1.66699 17.5828 4.77449 17.5828 8.59449C17.5828 13.2903 12.2028 17.917 10.7078 17.917Z"
fill="#61646B"
/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,8 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20 10C20 12.7625 17.7625 15 15 15C12.2375 15 10 12.7625 10 10C10 7.2375 12.2375 5 15 5C17.7625 5 20 7.2375 20 10ZM5 22.5C5 19.175 11.6625 17.5 15 17.5C18.3375 17.5 25 19.175 25 22.5V23.75C25 24.4375 24.4375 25 23.75 25H6.25C5.5625 25 5 24.4375 5 23.75V22.5Z"
fill="#4263EB"
/>
</svg>

After

Width:  |  Height:  |  Size: 440 B

View File

@ -0,0 +1,8 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.3777 15C24.3777 15.425 24.3402 15.825 24.2902 16.225L26.9277 18.2875C27.1652 18.475 27.2277 18.8125 27.0777 19.0875L24.5777 23.4125C24.4277 23.6875 24.1027 23.8 23.8152 23.6875L20.7027 22.4375C20.0527 22.925 19.3527 23.35 18.5902 23.6625L18.1152 26.975C18.0777 27.275 17.8152 27.5 17.5027 27.5H12.5027C12.1902 27.5 11.9277 27.275 11.8902 26.975L11.4152 23.6625C10.6527 23.35 9.95273 22.9375 9.30273 22.4375L6.19023 23.6875C5.91523 23.7875 5.57773 23.6875 5.42773 23.4125L2.92773 19.0875C2.77773 18.8125 2.84023 18.475 3.07773 18.2875L5.71523 16.225C5.66523 15.825 5.62773 15.4125 5.62773 15C5.62773 14.5875 5.66523 14.175 5.71523 13.775L3.07773 11.7125C2.84023 11.525 2.76523 11.1875 2.92773 10.9125L5.42773 6.5875C5.57773 6.3125 5.90273 6.2 6.19023 6.3125L9.30273 7.5625C9.95273 7.075 10.6527 6.65 11.4152 6.3375L11.8902 3.025C11.9277 2.725 12.1902 2.5 12.5027 2.5H17.5027C17.8152 2.5 18.0777 2.725 18.1152 3.025L18.5902 6.3375C19.3527 6.65 20.0527 7.0625 20.7027 7.5625L23.8152 6.3125C24.0902 6.2125 24.4277 6.3125 24.5777 6.5875L27.0777 10.9125C27.2277 11.1875 27.1652 11.525 26.9277 11.7125L24.2902 13.775C24.3402 14.175 24.3777 14.575 24.3777 15ZM10.6277 15C10.6277 17.4125 12.5902 19.375 15.0027 19.375C17.4152 19.375 19.3777 17.4125 19.3777 15C19.3777 12.5875 17.4152 10.625 15.0027 10.625C12.5902 10.625 10.6277 12.5875 10.6277 15Z"
fill="#4263EB"
/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,8 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 5H5C3.6125 5 2.5125 6.1125 2.5125 7.5L2.5 22.5C2.5 23.8875 3.6125 25 5 25H25C26.3875 25 27.5 23.8875 27.5 22.5V7.5C27.5 6.1125 26.3875 5 25 5ZM23.75 22.5H6.25C5.5625 22.5 5 21.9375 5 21.25V15H25V21.25C25 21.9375 24.4375 22.5 23.75 22.5ZM5 10H25V8.75C25 8.0625 24.4375 7.5 23.75 7.5H6.25C5.5625 7.5 5 8.0625 5 8.75V10Z"
fill="#4263EB"
/>
</svg>

After

Width:  |  Height:  |  Size: 503 B

View File

@ -0,0 +1,8 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.58741 25.6295H24.4124C26.3374 25.6295 27.5374 23.542 26.5749 21.8795L17.1624 5.61699C16.1999 3.95449 13.7999 3.95449 12.8374 5.61699L3.42491 21.8795C2.46241 23.542 3.66241 25.6295 5.58741 25.6295ZM14.9999 16.8795C14.3124 16.8795 13.7499 16.317 13.7499 15.6295V13.1295C13.7499 12.442 14.3124 11.8795 14.9999 11.8795C15.6874 11.8795 16.2499 12.442 16.2499 13.1295V15.6295C16.2499 16.317 15.6874 16.8795 14.9999 16.8795ZM13.7499 21.8795H16.2499V19.3795H13.7499V21.8795Z"
fill="#4263EB"
/>
</svg>

After

Width:  |  Height:  |  Size: 651 B

View File

@ -1,91 +1,50 @@
<script lang="ts">
import { onMount } from 'svelte';
import NavigationBar from "../../lib/Components/common/NavigationBar.svelte";
import Result from "./Components/Result.svelte"
import NavigationBarLayout from './../../lib/Components/Layouts/NavigationBarLayout.svelte'
import Result from './Components/Result.svelte'
import Top from './Components/Top.svelte'
let navBarItems = [
{
name: 'Home',
active: false,
url: '/',
image_url:
"data:image/svg+xml,%3Csvg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1572 22.2352V18.6679C8.1572 17.7573 8.90083 17.019 9.81813 17.019H13.1713C13.6118 17.019 14.0343 17.1928 14.3458 17.502C14.6573 17.8112 14.8323 18.2306 14.8323 18.6679V22.2352C14.8295 22.6138 14.979 22.9779 15.2477 23.2465C15.5164 23.5152 15.882 23.6663 16.2634 23.6663H18.5511C19.6195 23.6691 20.6452 23.2497 21.4017 22.5006C22.1581 21.7516 22.5833 20.7345 22.5833 19.6738V9.51101C22.5833 8.65421 22.2007 7.84149 21.5387 7.29179L13.7563 1.12152C12.4026 0.0396631 10.4629 0.0745936 9.14958 1.20448L1.54481 7.29179C0.85149 7.82529 0.437104 8.64042 0.416626 9.51101V19.6634C0.416626 21.8742 2.2219 23.6663 4.44883 23.6663H6.6843C7.47639 23.6663 8.12012 23.0319 8.12586 22.2456L8.1572 22.2352Z' fill='%2361646B'/%3E%3C/svg%3E%0A",
},
{
name: 'Explore',
active: true,
url: '/explore',
image_url:
"data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.58 11.0798L10.3585 14.9846L14.2622 13.7619L15.4848 9.85711L11.58 11.0798ZM9.02384 17.1931C8.79517 17.1931 8.57117 17.1033 8.40434 16.9376C8.17451 16.7066 8.09051 16.3671 8.18851 16.0579L10.047 10.1208C10.1322 9.84545 10.3468 9.63195 10.6198 9.54678L16.557 7.68828C16.8685 7.58911 17.2068 7.67428 17.4378 7.90411C17.6677 8.13511 17.7517 8.47461 17.6537 8.78378L15.7963 14.7209C15.7112 14.9951 15.4953 15.2098 15.2223 15.2949L9.28517 17.1534C9.19884 17.1803 9.11017 17.1931 9.02384 17.1931Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_2517' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='25'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833374 0.333008H25.0088V24.5083H0.833374V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2517)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.921 2.08301C7.22063 2.08301 2.58313 6.72167 2.58313 12.4208C2.58313 18.1212 7.22063 22.7587 12.921 22.7587C18.6213 22.7587 23.2588 18.1212 23.2588 12.4208C23.2588 6.72167 18.6213 2.08301 12.921 2.08301M12.921 24.5087C6.2558 24.5087 0.83313 19.086 0.83313 12.4208C0.83313 5.75567 6.2558 0.333008 12.921 0.333008C19.5861 0.333008 25.0088 5.75567 25.0088 12.4208C25.0088 19.086 19.5861 24.5087 12.921 24.5087' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
},
{
name: 'Map',
active: false,
url: '/map',
image_url:
"data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833496 8.80925C0.833496 4.29425 4.48516 0.642578 9.00016 0.642578C13.5152 0.642578 17.1668 4.29425 17.1668 8.80925C17.1668 13.6742 12.0102 20.3826 9.8985 22.9376C9.43183 23.4976 8.58016 23.4976 8.1135 22.9376C5.99016 20.3826 0.833496 13.6742 0.833496 8.80925ZM6.0835 8.80925C6.0835 10.4192 7.39016 11.7259 9.00016 11.7259C10.6102 11.7259 11.9168 10.4192 11.9168 8.80925C11.9168 7.19924 10.6102 5.89258 9.00016 5.89258C7.39016 5.89258 6.0835 7.19924 6.0835 8.80925Z' fill='%2361646B' /%3E%3C/svg%3E%0A",
},
{
name: 'Trips',
active: false,
image_url:
"data:image/svg+xml,%3Csvg width='26' height='22' viewBox='0 0 26 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 5.53348C14.8832 5.53348 14.4912 5.14148 14.4912 4.65848V1.83398C14.4912 1.35098 14.8832 0.958984 15.3662 0.958984C15.8492 0.958984 16.2412 1.35098 16.2412 1.83398V4.65848C16.2412 5.14148 15.8492 5.53348 15.3662 5.53348Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 20.8318C14.8832 20.8318 14.4912 20.4398 14.4912 19.9568V17.5967C14.4912 17.1125 14.8832 16.7217 15.3662 16.7217C15.8492 16.7217 16.2412 17.1125 16.2412 17.5967V19.9568C16.2412 20.4398 15.8492 20.8318 15.3662 20.8318Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 14.4634C14.8832 14.4634 14.4912 14.0714 14.4912 13.5884V7.96387C14.4912 7.48087 14.8832 7.08887 15.3662 7.08887C15.8492 7.08887 16.2412 7.48087 16.2412 7.96387V13.5884C16.2412 14.0714 15.8492 14.4634 15.3662 14.4634Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_513' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.666626 0.666992H25.75V21.0833H0.666626V0.666992Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_513)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.41663 14.1467V16.4088C2.41663 18.0212 3.75013 19.3337 5.38929 19.3337H21.0273C22.6665 19.3337 24 18.0212 24 16.4088V14.1467C22.5405 13.7628 21.4601 12.4422 21.4601 10.8765C21.4601 9.30966 22.5393 7.99016 24 7.60633L23.9988 5.34183C23.9988 3.72949 22.6653 2.41699 21.0261 2.41699H5.39046C3.75129 2.41699 2.41779 3.72949 2.41779 5.34183L2.41663 7.69616C3.89479 8.05899 4.95646 9.32599 4.95646 10.8765C4.95646 12.4422 3.87613 13.7628 2.41663 14.1467ZM21.0273 21.0837H5.38929C2.78529 21.0837 0.666626 18.986 0.666626 16.4088V13.3848C0.666626 12.9018 1.05863 12.5098 1.54163 12.5098C2.45979 12.5098 3.20646 11.7772 3.20646 10.8765C3.20646 10.0015 2.49013 9.34116 1.54163 9.34116C1.30946 9.34116 1.08663 9.24899 0.923293 9.08449C0.758793 8.92116 0.666626 8.69716 0.666626 8.46616L0.667793 5.34183C0.667793 2.76466 2.78646 0.666992 5.39046 0.666992H21.0261C23.6301 0.666992 25.7488 2.76466 25.7488 5.34183L25.75 8.36816C25.75 8.59916 25.6578 8.82316 25.4933 8.98649C25.33 9.15099 25.1071 9.24316 24.875 9.24316C23.9568 9.24316 23.2101 9.97583 23.2101 10.8765C23.2101 11.7772 23.9568 12.5098 24.875 12.5098C25.358 12.5098 25.75 12.9018 25.75 13.3848V16.4088C25.75 18.986 23.6313 21.0837 21.0273 21.0837Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
},
{
name: 'Profile',
active: false,
image_url:
"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
},
]
let Search: string
let Search:string
function search(value:string) {
return [value, value, value]
}
function search(value: string) {
return [value, value, value]
}
</script>
<div class="content">
<Top bind:search_value={Search} />
<NavigationBarLayout>
<div class="content">
<Top bind:search_value={Search} />
<div class="results">
{#each search(Search) as result}
<Result name={result} />
{/each}
<div class="results">
{#each search(Search) as result}
<Result name={result} />
{/each}
<div class="end">
</div>
</div>
</div>
<NavigationBar items={navBarItems}/>
<div class="end" />
</div>
</div>
</NavigationBarLayout>
<style lang="scss">
.content{
width: 100%;
max-height: 100vh;
overflow-y: scroll;
.content {
width: 100%;
max-height: 100vh;
overflow-y: scroll;
.results{
width: 100%;
height: 60vh;
.results {
width: 100%;
height: 60vh;
position: relative;
padding: 16px 16px 0px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
position: relative;
padding: 16px 16px 0px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
.end{
width: 20px;
min-height: 10vh;
}
}
}
.end {
width: 20px;
min-height: 10vh;
}
}
}
</style>

View File

@ -1,5 +1,64 @@
<script>
import Logout from './../../lib/svg/Logout.svelte'
import Help from './../../lib/svg/Help.svelte'
import Line from '$lib/Components/common/Line.svelte'
import SettingRow from '$lib/Components/common/SettingRow.svelte'
import Profile from '$lib/svg/Profile.svelte'
import Wallet from '$lib/svg/Wallet.svelte'
import Setting2 from '$lib/svg/Setting2.svelte'
import { Link } from 'svelte-routing'
import NavigationBarLayout from './../../lib/Components/Layouts/NavigationBarLayout.svelte'
import Earth from '$lib/svg/Earth.svelte'
import Warning from '$lib/svg/Warning.svelte'
import Point from '$lib/svg/Point.svelte'
import PointSmall from '$lib/svg/PointSmall.svelte'
import InputPicture from '$lib/Components/Inputs/InputPicture.svelte'
const items = [
{
title: 'Account',
itms: [
{ icon: Profile, text: 'Your Profile' },
{ icon: Wallet, text: 'Payment History' },
{ icon: Setting2, text: 'Preferences' },
],
},
{
title: 'Settings',
itms: [{ icon: Earth, text: 'Language' }],
},
{
title: 'Legal',
itms: [
{ icon: Help, text: 'Help' },
{ icon: Warning, text: 'Terms & Conditions' },
{ icon: Logout, text: 'Log out' },
],
},
]
</script>
<NavigationBarLayout />
<NavigationBarLayout class="p-4">
<div class="w-full h-[188px] flex flex-wrap flex-col gap-4 justify-center items-center mb-8">
<InputPicture />
<span class="font-semibold text-[24px]">User name</span>
<SettingRow class="w-auto gap-2">
<PointSmall />
<span class="text-[16px] text-[#61646B]">Prague, Czechia</span>
</SettingRow>
</div>
<Line />
<div class="w-full h-auto flex flex-wrap flex-row mt-4 gap-4">
{#each items as { title, itms }}
<div class="mb-4 text-[18px] text-[#61646B]">{title}</div>
{#each itms as { icon, text }}
<SettingRow>
<svelte:component this={icon} />
<Link class="font-semibold text-[18px]" to={'/'}>{text}</Link>
</SettingRow>
<Line />
{/each}
{/each}
</div>
</NavigationBarLayout>