Update 25.2.2023 #57

Merged
Sch3nky merged 8 commits from master into deploy/prod 2023-02-25 15:37:11 +00:00
30 changed files with 585 additions and 258 deletions

View File

@ -1,8 +1,8 @@
on:
push:
branches: [ "deploy/prod" ]
branches: ['deploy/prod']
pull_request:
branches: [ "deploy/prod" ]
branches: ['deploy/prod']
name: 🚀 Deploy website on push
jobs:

View File

@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"preview": "vite preview",
"appwrite": "docker compose -f ./appwrite/docker-compose.yml up"

View File

@ -40,8 +40,8 @@
component: () => import('$routes/profile/profile.svelte'),
},
{
path: '/profile/payment_history',
component: () => import('$routes/profile/payment_history.svelte'),
path: '/profile/:function',
component: () => import('$routes/profile/profile-functions.svelte'),
},
{
path: '/legal/terms_of_service',

View File

@ -0,0 +1,56 @@
<script>
import Eye from '../../svg/Eye.svelte'
export let placeholder = ''
export let value = ''
let input
let vissible = false
function changeVisibility(i) {
if (!vissible) {
i.type = 'text'
vissible = true
} else {
i.type = 'password'
vissible = false
}
}
</script>
<div>
<input bind:value bind:this={input} type="password" {placeholder} minlength="8" class="input" required />
<button type="button" on:click={changeVisibility(input)}>
<Eye active={vissible} />
</button>
</div>
<style lang="scss">
div {
width: 100%;
position: relative;
button {
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
button:hover {
opacity: 50%;
}
}
.input {
width: calc(100%);
padding: 12px 24px;
border-radius: 15px;
background-color: #eeeeee;
font-size: 18px;
font-style: normal;
font-weight: 600;
@media screen and (max-height: 720px) {
padding: 8px 24px;
}
}
</style>

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.0019 2.98493C16.5119 2.49493 15.7219 2.49493 15.2319 2.98493L6.92186 11.2949C6.53186 11.6849 6.53186 12.3149 6.92186 12.7049L15.2319 21.0149C15.7219 21.5049 16.5119 21.5049 17.0019 21.0149C17.4919 20.5249 17.4919 19.7349 17.0019 19.2449L9.76186 11.9949L17.0119 4.74493C17.4919 4.26493 17.4919 3.46493 17.0019 2.98493Z" fill="black" fill-opacity="0.54"/>
</svg>

After

Width:  |  Height:  |  Size: 478 B

View File

@ -0,0 +1,11 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter: invert(34%) sepia(86%) saturate(3454%) hue-rotate(222deg) brightness(96%) contrast(92%);">
<rect width="26" height="26" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1890_4495" transform="scale(0.01)"/>
</pattern>
<image id="image0_1890_4495" width="100" height="100" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -1,26 +1,3 @@
<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>
<svg viewBox="0 0 24 24" width="24" height="24" stroke="#4263EB" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 319 B

4
src/lib/svg/Pen.svelte Normal file
View File

@ -0,0 +1,4 @@
<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.8859 7.03914C26.3734 7.52664 26.3734 8.31414 25.8859 8.80164L23.5984 11.0891L18.9109 6.40164L21.1984 4.11414C21.432 3.88008 21.749 3.74854 22.0797 3.74854C22.4103 3.74854 22.7274 3.88008 22.9609 4.11414L25.8859 7.03914ZM3.74841 25.6266V21.8266C3.74841 21.6516 3.81091 21.5016 3.93591 21.3766L17.5734 7.73914L22.2609 12.4266L8.61091 26.0641C8.49841 26.1891 8.33591 26.2516 8.17341 26.2516H4.37341C4.02341 26.2516 3.74841 25.9766 3.74841 25.6266Z" fill="#4263EB"/>
</svg>

After

Width:  |  Height:  |  Size: 627 B

4
src/lib/svg/Sun.svelte Normal file
View File

@ -0,0 +1,4 @@
<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.0063 1.3125H15.0188C15.7063 1.3125 16.2563 1.8625 16.2563 2.55V3.7625C16.2563 4.45 15.7063 5 15.0063 4.9875H14.9938C14.3063 4.9875 13.7563 4.4375 13.7563 3.75V2.55C13.7563 1.8625 14.3063 1.3125 15.0063 1.3125ZM7.56885 5.8L7.08135 5.3125C6.59385 4.825 5.80635 4.8375 5.33135 5.3125L5.31885 5.325C4.83135 5.8125 4.83135 6.6 5.31885 7.075L5.80635 7.5625C6.29385 8.05 7.06885 8.05 7.55635 7.5625L7.56885 7.55C8.05635 7.075 8.05635 6.275 7.56885 5.8ZM3.76885 13.75H2.49385C1.80635 13.75 1.25635 14.3 1.25635 14.9875V15C1.25635 15.6875 1.80635 16.2375 2.49385 16.2375H3.75635C4.45635 16.25 5.00635 15.7 5.00635 15.0125V15C5.00635 14.3 4.45635 13.75 3.76885 13.75ZM24.6938 5.325C24.2063 4.8375 23.4188 4.8375 22.9313 5.3125L22.4438 5.8C21.9563 6.2875 21.9563 7.075 22.4438 7.55L22.4563 7.5625C22.9438 8.05 23.7313 8.05 24.2063 7.5625L24.6938 7.075C25.1813 6.5875 25.1813 5.8125 24.6938 5.325ZM22.9188 24.6875L22.4313 24.2C21.9438 23.7125 21.9438 22.9375 22.4438 22.4375C22.9188 21.9625 23.7063 21.95 24.1938 22.4375L24.6813 22.925C25.1688 23.4125 25.1688 24.2 24.6813 24.6875C24.1938 25.175 23.4063 25.175 22.9188 24.6875ZM25.0063 14.9875V15C25.0063 15.6875 25.5563 16.2375 26.2438 16.2375H27.5063C28.1938 16.2375 28.7438 15.6875 28.7438 15V14.9875C28.7438 14.3 28.1938 13.75 27.5063 13.75H26.2438C25.5563 13.75 25.0063 14.3 25.0063 14.9875ZM7.50635 15C7.50635 10.8625 10.8688 7.5 15.0063 7.5C19.1438 7.5 22.5063 10.8625 22.5063 15C22.5063 19.1375 19.1438 22.5 15.0063 22.5C10.8688 22.5 7.50635 19.1375 7.50635 15ZM14.9938 28.6875H15.0063C15.6938 28.6875 16.2438 28.1375 16.2438 27.45V26.25C16.2438 25.5625 15.6938 25.0125 15.0063 25.0125H14.9938C14.3063 25.0125 13.7563 25.5625 13.7563 26.25V27.45C13.7563 28.1375 14.3063 28.6875 14.9938 28.6875ZM7.08135 24.675C6.59385 25.1625 5.80635 25.1625 5.31885 24.675C4.83135 24.1875 4.83135 23.4125 5.30635 22.9125L5.79385 22.425C6.02739 22.1909 6.34445 22.0594 6.6751 22.0594C7.00574 22.0594 7.32281 22.1909 7.55635 22.425L7.56885 22.4375C8.04385 22.9125 8.05635 23.7 7.56885 24.1875L7.08135 24.675Z" fill="#4263EB"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,6 +1,7 @@
import { databases } from '$lib/appwrite'
import { Query } from 'appwrite'
import database from 'svelte-appwrite-client/src/lib/database'
import { getLocationDataFromLatAndLong } from '../locations'
export const load = async (pathName: string) => {
const checkPoints = []
@ -11,10 +12,20 @@ export const load = async (pathName: string) => {
for (const checkPointId of checkPointsIds) {
checkPoints.push(await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId))
}
const rating = await getRating(game.$id)
console.log(rating)
game['rating'] = rating
game['checkPoints'] = checkPoints
return game
}
const getRating = async (expId: string) => {
const { documents } = await databases.listDocuments('63cef30d6da945dd4250', '63ee6353ebb174cf815d', [Query.equal('ExpID', expId)])
const sum = documents.reduce((accumulator, rating) => accumulator + rating.ExpUserRating, 0)
return sum / documents.length
}
export const answer = async (checkPointId: string, answer: any) => {
const checkPoint = await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId)
console.log({ checkPoint })
@ -24,3 +35,17 @@ export const answer = async (checkPointId: string, answer: any) => {
if (CPType === 'CHECKBOX') return JSON.stringify(answer) === JSON.stringify(correctAnswer)
if (CPType === 'RADIO' || CPType === 'NUMBER' || CPType === 'TEXT') return answer === correctAnswer[0]
}
export const getExpiriences = async () => {
const expiriences = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888')).documents
let items: Array<{ location: string; name: string; link: string }> = []
for (const expirience of expiriences) {
items.push({
location: (await getLocationDataFromLatAndLong(expirience.ExpLocation[0], expirience.ExpLocation[1])).city,
name: expirience.ExpName,
link: `${expirience.ExpURL}`,
})
}
return items
}

View File

@ -0,0 +1,8 @@
export const getLocationDataFromLatAndLong = async (latitude: number, longitude: number) => {
const response = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`)
const data = await response.json()
return {
city: data.address.town || data.address.city || data.address.village,
state: data.address.country,
}
}

View File

@ -2,12 +2,11 @@
import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte'
import Result from './Components/Result.svelte'
import Top from './Components/Top.svelte'
import { getExpiriences } from '$lib/utils/database/game'
import Loading from '$lib/components/Common/Loading.svelte'
let Search: string
function search(value: string) {
return [value, value, value]
}
</script>
<NavigationBarLayout>
@ -15,9 +14,16 @@
<Top bind:search_value={Search} />
<div class="results">
{#each search(Search) as result}
<Result name={result} />
{#await getExpiriences()}
<div class="w-full h-24 flex items-center justify-center">
<Loading />
</div>
{:then expiriences}
{#each expiriences as result}
<Result name={result.name} />
{/each}
{/await}
<div class="end" />
</div>

View File

@ -1,9 +1,10 @@
<script>
<script lang="ts">
import Section from '../../../lib/components/Common/Section.svelte'
import Button from '../../../lib/components/Buttons/Button.svelte'
import Image from '../../../lib/components/Common/Image.svelte'
export let control, nextQuestion
export let control: null | false | true | 'not-control'
export let nextQuestion
export let imgSrc
</script>
@ -23,7 +24,7 @@
</div>
<div class="flex items-center justify-center flex-col w-full gap-6">
<span class="relative"> <slot name="answers" /> </span>
{#if control !== null}<!--jestli jsem už odpověděl-->
{#if control !== null || control === 'not-control'}<!--jestli jsem už odpověděl-->
<Button on:submit={nextQuestion} primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 fixed m-10 relative">Na další otázku</Button>
{:else}<!--čeká na odpověd, na sejmutí-->
<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 fixed m-10 relative">Vyhodnotit</Button>
@ -31,9 +32,11 @@
</div>
</div>
<div class="w-full relative bottom-[170px] flex justify-center h-fit size">
{#if control}
{#if control === 'not-control' || control === null}
<span />
{:else if control}
<span style="color:greenyellow">správně</span>
{:else if control !== null}
{:else}
<span style="color:red">špatně</span>
{/if}
</div>

View File

@ -0,0 +1,27 @@
<script lang="ts">
import Layout from '../Components/Layout.svelte'
import Input from '../../../lib/components/Inputs/Input.svelte'
import { checkPoint } from '$lib/TStypes/expiriences'
import { answer } from '$lib/utils/database/game'
export let data: { name: string; checkPoint: checkPoint }
const { checkPoint, name } = data
let myAnswer = ''
export let nextQuestion
</script>
<Layout
imgSrc={'gameData.question.thumbnail'}
control={'not-control'}
nextQuestion={() => {
nextQuestion()
myAnswer = ''
}}
>
<span slot="title">{name}</span>
<span slot="about">{@html checkPoint.CPText}</span>
</Layout>
<style lang="scss">
</style>

View File

@ -2,7 +2,7 @@
import Layout from '../Components/Layout.svelte'
import CheckBox from '../../../lib/components/Inputs/Checkbox.svelte'
import { checkPoint } from '$lib/TStypes/expiriences'
import { answer } from '$lib/utils/game'
import { answer } from '$lib/utils/database/game'
export let data: { name: string; checkPoint: checkPoint }
const { checkPoint, name } = data

View File

@ -2,7 +2,7 @@
import Layout from '../Components/Layout.svelte'
import Input from '../../../lib/components/Inputs/Input.svelte'
import { checkPoint } from '$lib/TStypes/expiriences'
import { answer } from '$lib/utils/game'
import { answer } from '$lib/utils/database/game'
export let data: { name: string; checkPoint: checkPoint }
const { checkPoint, name } = data

View File

@ -10,6 +10,7 @@
import Finish from './Finish.svelte'
import { data } from '$lib/stores/game'
import Erantmap from '$lib/components/Map/Erantmap.svelte'
import Info from './Info.svelte'
const components = {
TEXT: TextForm,
@ -18,10 +19,11 @@
CHECKBOX: MultiplyForm,
interval: IntervalForm,
qrcode: QrCode,
INFO: Info,
}
let control = null // if true => spravne if false spatne
let view: 'question' | 'map' = 'question'
let view: 'question' | 'map' = 'map'
export let gameData: any = {} //data
$: console.log(gameData)
@ -54,6 +56,8 @@
let user = { lat: null, lng: null }
$: console.log(page, gameData.checkPoints[clientAnswers.pos].CPType)
/* //set user to localstorage
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
//nastaví

View File

@ -2,7 +2,7 @@
import Radio from '../../../lib/components/Inputs/Radio.svelte'
import Layout from '../Components/Layout.svelte'
import { checkPoint } from '$lib/TStypes/expiriences'
import { answer } from '$lib/utils/game'
import { answer } from '$lib/utils/database/game'
export let data: { name: string; checkPoint: checkPoint }
const { checkPoint, name } = data

View File

@ -2,7 +2,7 @@
import Layout from '../Components/Layout.svelte'
import Input from '../../../lib/components/Inputs/Input.svelte'
import { checkPoint } from '$lib/TStypes/expiriences'
import { answer } from '$lib/utils/game'
import { answer } from '$lib/utils/database/game'
export let data: { name: string; checkPoint: checkPoint }
const { checkPoint, name } = data

View File

@ -16,7 +16,8 @@
import collections from '$lib/collections'
import { Query } from 'appwrite'
import { onMount } from 'svelte'
import { load } from '$lib/utils/game'
import { load } from '$lib/utils/database/game'
import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
export let params: { gameurl: string }
@ -28,13 +29,14 @@
$data = await load(params.gameurl)
loading = false
})
$: console.log($data)
$: assets = $data?.questions
?.filter((q) => q.thumbnail !== null)
?.slice(0, 8)
?.map((q) => q.thumbnail)
let view: 'game-play' | 'game-loading' = 'game-play'
let view: 'game-play' | 'game-loading' = 'game-loading'
//is user already in game
//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
@ -54,11 +56,13 @@
<div class="bubbles">
<Bubble background="blue">
<span slot="icon"><IconStar /></span>
<span> {$data.ExpRating} </span>
<span> {$data.rating} </span>
</Bubble>
<Bubble background="white">
<span slot="icon"><IconPoint /></span>
<span>{'$data.district'}</span>
{#await getLocationDataFromLatAndLong($data.ExpLocation[0], $data.ExpLocation[1]) then { city }}
<span>{city}</span>
{/await}
</Bubble>
</div>
</div>
@ -79,7 +83,7 @@
<div class="w-full relative">
<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
<Map radius class="w-full h-44" center={{ lng: $data.ExpLocation[0], lat: $data.ExpLocation[1] }}>
<Map radius class="w-full h-44" center={{ lng: $data.ExpLocation[1], lat: $data.ExpLocation[0] }}>
{#each $data.checkPoints as { CPLocation: [lat, lng] }}
<Marker {lat} {lng} />
{/each}

View File

@ -1,16 +1,19 @@
<script>
import CompartmentItem from "./Compartment_Item.svelte"
import Headline from "./Headline.svelte";
import { navigate } from '$lib/router'
import CompartmentItem from './Compartment_Item.svelte'
import Headline from './Headline.svelte'
export let items = []
console.log(items)
</script>
<div class="section">
<Headline content="Inspiration on your trip"></Headline>
<Headline content="Inspiration on your trip" />
<div class="options">
{#each items as item}
<CompartmentItem price={item.price} location={item.location} name={item.name} image={item.image}></CompartmentItem>
<CompartmentItem on:click={() => navigate(`${item.link}`)} price={item.price} location={item.location} name={item.name} image={item.image} />
{/each}
</div>
</div>
@ -24,7 +27,6 @@
flex-direction: column;
align-items: flex-start;
position: relative;
}
@media screen and (max-width: 370px) {
.section {
@ -53,5 +55,4 @@
.section > .options::-webkit-scrollbar {
display: none;
}
</style>

View File

@ -1,13 +1,13 @@
<script>
export let location = "Home"
export let name = "Kawa Ijen"
export let image = ""
export let location = 'Home'
export let name = 'Kawa Ijen'
export let image = ''
</script>
<button>
<button on:click>
<div class="image">
{#if image !== ""}
<img style="flex-grow: 1;" src={image}>
{#if image !== ''}
<img style="flex-grow: 1;" src={image} />
{/if}
<div class="bookmark">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -15,23 +15,37 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1.33301H13.3592V15.2308H2V1.33301Z" fill="white" />
</mask>
<g mask="url(#mask0_1402_894)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.56133 2.33301C3.862 2.33301 3 2.98767 3 4.28034V14.0963C3 14.159 3.036 14.193 3.066 14.2103C3.096 14.229 3.14333 14.2423 3.198 14.2117L7.45267 11.825C7.60467 11.7403 7.79067 11.7397 7.94333 11.8257L12.1613 14.2083C12.2167 14.2403 12.264 14.2257 12.294 14.2077C12.324 14.1897 12.3593 14.1557 12.3593 14.093V4.40234C12.3593 3.89101 12.3593 2.33301 9.80067 2.33301H5.56133ZM3.13267 15.231C2.936 15.231 2.73933 15.1783 2.56067 15.073C2.20933 14.8683 2 14.5023 2 14.0963V4.28034C2 2.40701 3.298 1.33301 5.56133 1.33301H9.80067C12.062 1.33301 13.3593 2.45234 13.3593 4.40234V14.093C13.3593 14.4997 13.15 14.8657 12.798 15.0703C12.4473 15.2757 12.0247 15.2797 11.67 15.0797L7.69667 12.835L3.68667 15.0843C3.51333 15.1817 3.32333 15.231 3.13267 15.231Z" fill="white"/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.56133 2.33301C3.862 2.33301 3 2.98767 3 4.28034V14.0963C3 14.159 3.036 14.193 3.066 14.2103C3.096 14.229 3.14333 14.2423 3.198 14.2117L7.45267 11.825C7.60467 11.7403 7.79067 11.7397 7.94333 11.8257L12.1613 14.2083C12.2167 14.2403 12.264 14.2257 12.294 14.2077C12.324 14.1897 12.3593 14.1557 12.3593 14.093V4.40234C12.3593 3.89101 12.3593 2.33301 9.80067 2.33301H5.56133ZM3.13267 15.231C2.936 15.231 2.73933 15.1783 2.56067 15.073C2.20933 14.8683 2 14.5023 2 14.0963V4.28034C2 2.40701 3.298 1.33301 5.56133 1.33301H9.80067C12.062 1.33301 13.3593 2.45234 13.3593 4.40234V14.093C13.3593 14.4997 13.15 14.8657 12.798 15.0703C12.4473 15.2757 12.0247 15.2797 11.67 15.0797L7.69667 12.835L3.68667 15.0843C3.51333 15.1817 3.32333 15.231 3.13267 15.231Z"
fill="white"
/>
</g>
</svg>
</div>
</div>
<div class="info">
<h3>{name}</h3>
<div>
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.16667 4.66602C5.52333 4.66602 5 5.18935 5 5.83335C5 6.47668 5.52333 6.99935 6.16667 6.99935C6.81 6.99935 7.33333 6.47668 7.33333 5.83335C7.33333 5.18935 6.81 4.66602 6.16667 4.66602ZM6.16667 7.99935C4.972 7.99935 4 7.02802 4 5.83335C4 4.63802 4.972 3.66602 6.16667 3.66602C7.36133 3.66602 8.33333 4.63802 8.33333 5.83335C8.33333 7.02802 7.36133 7.99935 6.16667 7.99935Z" fill="#61646B"/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.16667 4.66602C5.52333 4.66602 5 5.18935 5 5.83335C5 6.47668 5.52333 6.99935 6.16667 6.99935C6.81 6.99935 7.33333 6.47668 7.33333 5.83335C7.33333 5.18935 6.81 4.66602 6.16667 4.66602ZM6.16667 7.99935C4.972 7.99935 4 7.02802 4 5.83335C4 4.63802 4.972 3.66602 6.16667 3.66602C7.36133 3.66602 8.33333 4.63802 8.33333 5.83335C8.33333 7.02802 7.36133 7.99935 6.16667 7.99935Z"
fill="#61646B"
/>
<mask id="mask0_1402_1007" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.666504 0.333008H11.6662V13.333H0.666504V0.333008Z" fill="white" />
</mask>
<g mask="url(#mask0_1402_1007)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.16602 1.33301C3.68468 1.33301 1.66602 3.37101 1.66602 5.87501C1.66602 9.06101 5.41535 12.165 6.16602 12.3303C6.91668 12.1643 10.666 9.06034 10.666 5.87501C10.666 3.37101 8.64735 1.33301 6.16602 1.33301V1.33301ZM6.16602 13.333C4.97002 13.333 0.666016 9.63167 0.666016 5.87501C0.666016 2.81901 3.13335 0.333008 6.16602 0.333008C9.19868 0.333008 11.666 2.81901 11.666 5.87501C11.666 9.63167 7.36202 13.333 6.16602 13.333V13.333Z" fill="#61646B"/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.16602 1.33301C3.68468 1.33301 1.66602 3.37101 1.66602 5.87501C1.66602 9.06101 5.41535 12.165 6.16602 12.3303C6.91668 12.1643 10.666 9.06034 10.666 5.87501C10.666 3.37101 8.64735 1.33301 6.16602 1.33301V1.33301ZM6.16602 13.333C4.97002 13.333 0.666016 9.63167 0.666016 5.87501C0.666016 2.81901 3.13335 0.333008 6.16602 0.333008C9.19868 0.333008 11.666 2.81901 11.666 5.87501C11.666 9.63167 7.36202 13.333 6.16602 13.333V13.333Z"
fill="#61646B"
/>
</g>
</svg>
@ -53,11 +67,12 @@
position: relative;
border: 1px solid #EFEFF0;
border: 1px solid #efeff0;
border-radius: 20px;
}
button:hover, button:active{
button:hover,
button:active {
opacity: 70%;
cursor: pointer;
}
@ -68,10 +83,10 @@
/* background */
background-color: #EFEFF0;
background-color: #efeff0;
/* subtle-light */
border: 2px solid #AFB1B6;
border: 2px solid #afb1b6;
border-radius: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1402_2000' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1402_2000)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z' fill='%2361646B'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z' fill='%2361646B'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
@ -105,7 +120,7 @@
height: 28px;
right: 12px;
top: 12px;
background: #4263EB;
background: #4263eb;
border-radius: 8px;
display: flex;
align-items: center;
@ -137,7 +152,7 @@
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #19191B;
color: #19191b;
}
button > .info > div {
@ -152,6 +167,6 @@
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #61646B;
color: #61646b;
}
</style>

View File

@ -6,36 +6,34 @@
import Comparment from './Components/Comparment.svelte' //do budoucna bych to udělal pomocí komponent
import { onMount } from 'svelte'
import Animation from './Components/Animation.svelte'
import { getExpiriences } from '$lib/utils/database/game'
import Loading from '$lib/components/Common/Loading.svelte'
let fitstTime = false
onMount(() => {
if (localStorage.getItem("ErantFirstTime") == null){
if (localStorage.getItem('ErantFirstTime') == null) {
fitstTime = true
setTimeout(() => {
fitstTime = false
localStorage.setItem('ErantFirstTime', "false");
localStorage.setItem('ErantFirstTime', 'false')
}, 11000)
}
})
let city = "";
let state = "";
let city = ''
let state = ''
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(async position => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const response = await fetch(
`https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`
);
const data = await response.json();
city = data.address.town || data.address.city || data.address.village;
state = ", "+data.address.country;
});
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(async (position) => {
const latitude = position.coords.latitude
const longitude = position.coords.longitude
const response = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`)
const data = await response.json()
city = data.address.town || data.address.city || data.address.village
state = ', ' + data.address.country
})
}
</script>
{#if !fitstTime}
@ -48,13 +46,13 @@
<Categories />
<Comparment
items={[
{ price: '$10.00', location: 'Prag, Czech Republic', name: 'Hometown', image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
{ price: '$10.00', location: 'Prag, Czech Republic', name: 'Hometown', image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
{ price: '$10.00', location: 'Prag, Czech Republic', name: 'Hometown', image: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg' },
]}
/>
{#await getExpiriences()}
<div class="w-full h-24 flex items-center justify-center">
<Loading />
</div>
{:then expiriences}
<Comparment items={expiriences} />
{/await}
</NavigationBarLayout>
{:else}
<div class="content">

View File

@ -0,0 +1,70 @@
<script lang="ts">
import Line from "$lib/components/Common/Line.svelte";
function select_tag(){
const target = event.currentTarget as HTMLElement
console.log(target)
if (target.parentElement.classList.contains("tag-container-selected")){
target.parentElement.parentElement.querySelector(".tag-container").appendChild(target)
}
else{
target.parentElement.parentElement.querySelector(".tag-container-selected").appendChild(target)
}
}
</script>
<div class="container">
<p class="headline">What are you most interested in?</p>
<div class="tag-container-selected">
</div>
<Line />
<div class="tag-container">
<button class="tag" on:click={select_tag}>History</button>
<button class="tag" on:click={select_tag}>Pubs</button>
</div>
</div>
<style lang="scss">
.container{
padding: 0 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: left;
.headline{
width: 100%;
/* Label Large - Source Sans Pro/Medium 16/24 . +0.2 */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 28px;
/* or 156% */
display: flex;
align-items: center;
letter-spacing: 0.2px;
color: #000000;
}
.tag-container, .tag-container-selected{
width: 100%;
display: flex;
margin: 16px 0;
flex-wrap: wrap;
gap: 16px 24px;
.tag{
padding: 4px 10px;
background: #FFFFFF;
box-shadow: 0px 0px 20px -6px rgba(0, 0, 0, 0.45);
border-radius: 6px;
}
}
}
</style>

View File

@ -0,0 +1,92 @@
<script lang="ts">
import HiddenInput from '$lib/components/Inputs/Hidden_Input_type2.svelte'
let c_password:string = ''
let n_password:string = ''
let nr_password:string = ''
</script>
<div class="container">
<div class="photo">
<div class="currentPhoto">
</div>
<button class="changePhoto">
Update your photo
</button>
</div>
<form class="inputs">
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
<HiddenInput bind:value={c_password} placeholder="Your current password" />
<HiddenInput bind:value={n_password} placeholder="New password" />
<HiddenInput bind:value={nr_password} placeholder="Re-type new password" />
</form>
</div>
<style lang="scss">
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
.photo{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
.currentPhoto{
width: 100%;
aspect-ratio: 1/1;
/* background */
background: #EFEFF0;
/* subtle-light */
border: 2px solid #AFB1B6;
border-radius: 200px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1380_1768' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1380_1768)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z' fill='%23AFB1B6'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z' fill='%23AFB1B6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z' fill='%23AFB1B6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.changePhoto{
font-weight: 600;
font-size: 14px;
color: #FFFFFF;
padding: 8px 12px;
background: #110042;
border-radius: 15px;
}
}
.inputs{
padding: 0 24px;
margin-top: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 16px;
input[type='text'], input[type='email']{
padding: 12px 24px;
background: #EEEEEE;
width: 100%;
border-radius: 15px;
font-weight: 600;
font-size: 18px;
}
}
}
</style>

View File

@ -0,0 +1,31 @@
<script lang="ts">
import Line from '$lib/components/Common/Line.svelte'
import SettingRow from '$lib/components/Common/SettingRow.svelte'
import { Link } from 'svelte-routing'
import Earth from '$lib/svg/Earth.svelte'
import Sun from '$lib/svg/Sun.svelte';
const items = [
{
title: '',
itms: [{ icon: Sun, text: 'Theme', link:"/"}, { icon: Earth, text: 'Language', link:"/"}],
}
]
</script>
<Line />
<div class="w-full h-auto flex flex-wrap flex-row mt-4 gap-4">
{#each items as { title, itms }}
{#if title !== ""}
<div class="mb-4 text-[18px] text-[#61646B]">{title}</div>
{/if}
{#each itms as { icon, text, link}}
<SettingRow>
<svelte:component this={icon} />
<Link class="font-semibold text-[18px]" to={link}>{text}</Link>
</SettingRow>
{/each}
{/each}
</div>

View File

@ -1,78 +0,0 @@
<script lang="ts">
import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte'
import Line from '$lib/components/Common/Line.svelte'
import Help from './../../lib/svg/Help.svelte'
import SettingRow from '$lib/components/Common/SettingRow.svelte'
import Profile from '$lib/svg/Profile.svelte'
import Wallet from '$lib/svg/Wallet-Headline.svelte'
import { Link } from 'svelte-routing'
import Earth from '$lib/svg/Earth.svelte'
import Warning from '$lib/svg/Warning.svelte'
const items = [
{
title: '',
itms: [
{ icon: Profile, text: 'Subscriptions purchase: Premium', link:"/"},
],
},
{
title: 'Settings',
itms: [{ icon: Earth, text: 'Language', link:"/"}],
},
{
title: 'Legal',
itms: [
{ icon: Help, text: 'Help', link:"/"},
{ icon: Warning, text: 'Terms & Conditions', link:"/"},
],
},
]
</script>
<NavigationBarLayout class="p-4">
<div class="head">
<Wallet />
<h1>Payment History</h1>
</div>
<Line />
<div class="w-full h-auto flex flex-wrap flex-row mt-4 gap-4">
{#each items as { title, itms }}
{#if title !== ""}
<div class="mb-4 text-[18px] text-[#61646B]">{title}</div>
{/if}
{#each itms as { icon, text, link}}
<SettingRow>
<svelte:component this={icon} />
<Link class="font-semibold text-[18px]" to={link}>{text}</Link>
</SettingRow>
<Line />
{/each}
{/each}
</div>
</NavigationBarLayout>
<style lang="scss">
.head{
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px;
margin-bottom: 20px;
h1{
font-weight: 600;
font-size: 32px;
line-height: 40px;
color: #000000;
margin: 0;
}
svg{
min-height: 30px;
}
}
</style>

View File

@ -0,0 +1,63 @@
<script lang="ts">
import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte'
import { navigate } from 'svelte-routing'
import ArrowBack from '$lib/svg/ArrowBack.svelte'
import ProfileUpdate from './functions/Profile-Update.svelte';
import Setting from './functions/Setting.svelte';
import Cookies from './functions/Cookies.svelte';
import InterestsUpdate from './functions/Interests-Update.svelte';
const functions = [{name: "profile_update", display_name:"Update Your Profile", view: ProfileUpdate}, {name: "interests_update", display_name:"Update your interests", view: InterestsUpdate}, {name: "settings", display_name:"Setting", view: Setting}, {name: "cookies", display_name:"Cookies", view: Cookies}]
export let params: { function: string }
let data = functions.find(element => element.name === params.function.toLowerCase()) || null
if (data === null){
window.location.href = '/profile'
}
</script>
<NavigationBarLayout class="p-4">
<div class="head">
<button on:click={() => {navigate("/profile")}}>
<ArrowBack />
</button>
<h1>{data.display_name}</h1>
</div>
<svelte:component this={data.view}/>
</NavigationBarLayout>
<style lang="scss">
.head{
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px;
margin-bottom: 20px;
position: relative;
h1{
font-weight: 600;
font-size: 32px;
line-height: 40px;
color: #000000;
margin: 0;
}
button{
position: absolute;
left: 8px;
top: 50%;
transform: translate(0, -50%);
min-height: 30px;
}
}
</style>

View File

@ -4,11 +4,11 @@
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 Pen from '$lib/svg/Pen.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 CookieMonster from '$lib/svg/CookieMonster.svelte'
import Warning from '$lib/svg/Warning.svelte'
import PointSmall from '$lib/svg/PointSmall.svelte'
import InputPicture from '$lib/components/Inputs/InputPicture.svelte'
@ -20,20 +20,22 @@
{
title: 'Account',
itms: [
{ icon: Profile, text: 'Your Profile', link:"/"},
{ icon: Wallet, text: 'Payment History', link:"/profile/payment_history"},
{ icon: Setting2, text: 'Preferences', link:"/"},
{ icon: Profile, text: 'Update Your Profile', link:"/profile/profile_update"},
{ icon: Pen, text: 'Update Your Interests', link:"/profile/interests_update"},
],
},
{
title: 'Settings',
itms: [{ icon: Earth, text: 'Language', link:"/"}],
itms: [
{ icon: Setting2, text: 'Setting', link:"/profile/settings"},
{ icon: CookieMonster, text: 'Cookies', link:"/profile/cookies"}
],
},
{
title: 'Legal',
itms: [
{ icon: Help, text: 'Help', link:"/"},
{ icon: Warning, text: 'Terms of Service', link:"/"},
{ icon: Warning, text: 'Terms & Condition', link:"/"},
{ icon: Logout, text: 'Log out', link: () => user.deleteSessions() },,
],
},