Update 25.2.2023 #57

Merged
Sch3nky merged 8 commits from master into deploy/prod 2023-02-25 15:37:11 +00:00
20 changed files with 367 additions and 124 deletions
Showing only changes of commit 550774e5a7 - Show all commits

View File

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

View File

@ -13,7 +13,7 @@
$: if (isReady && !$user) { $: if (isReady && !$user) {
if (!(location.pathname.startsWith('/login') || location.pathname.startsWith('/register'))) { if (!(location.pathname.startsWith('/login') || location.pathname.startsWith('/register'))) {
navigate('/login') //navigate('/login')
} }
} }

View File

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

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

@ -6,7 +6,7 @@ import { getLocationDataFromLatAndLong } from '../locations'
export const load = async (pathName: string) => { export const load = async (pathName: string) => {
const checkPoints = [] const checkPoints = []
const game = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0] const game = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
const checkPointsIds = game.ExpCPsID const checkPointsIds = game.ExpCPsID
for (const checkPointId of checkPointsIds) { for (const checkPointId of checkPointsIds) {
@ -46,5 +46,6 @@ export const getExpiriences = async () => {
link: `${expirience.ExpURL}`, link: `${expirience.ExpURL}`,
}) })
} }
return items return items
} }

View File

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

View File

@ -4,6 +4,8 @@
import Headline from './Headline.svelte' import Headline from './Headline.svelte'
export let items = [] export let items = []
console.log(items)
</script> </script>
<div class="section"> <div class="section">

View File

@ -6,8 +6,6 @@
import Comparment from './Components/Comparment.svelte' //do budoucna bych to udělal pomocí komponent import Comparment from './Components/Comparment.svelte' //do budoucna bych to udělal pomocí komponent
import { onMount } from 'svelte' import { onMount } from 'svelte'
import Animation from './Components/Animation.svelte' import Animation from './Components/Animation.svelte'
import collections from '$lib/collections'
import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
import { getExpiriences } from '$lib/utils/database/game' import { getExpiriences } from '$lib/utils/database/game'
import Loading from '$lib/components/Common/Loading.svelte' import Loading from '$lib/components/Common/Loading.svelte'

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 Line from '$lib/components/Common/Line.svelte'
import SettingRow from '$lib/components/Common/SettingRow.svelte' import SettingRow from '$lib/components/Common/SettingRow.svelte'
import Profile from '$lib/svg/Profile.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 Setting2 from '$lib/svg/Setting2.svelte'
import { Link } from 'svelte-routing' import { Link } from 'svelte-routing'
import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte' 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 Warning from '$lib/svg/Warning.svelte'
import PointSmall from '$lib/svg/PointSmall.svelte' import PointSmall from '$lib/svg/PointSmall.svelte'
import InputPicture from '$lib/components/Inputs/InputPicture.svelte' import InputPicture from '$lib/components/Inputs/InputPicture.svelte'
@ -20,20 +20,22 @@
{ {
title: 'Account', title: 'Account',
itms: [ itms: [
{ icon: Profile, text: 'Your Profile', link:"/"}, { icon: Profile, text: 'Update Your Profile', link:"/profile/profile_update"},
{ icon: Wallet, text: 'Payment History', link:"/profile/payment_history"}, { icon: Pen, text: 'Update Your Interests', link:"/profile/interests_update"},
{ icon: Setting2, text: 'Preferences', link:"/"},
], ],
}, },
{ {
title: 'Settings', 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', title: 'Legal',
itms: [ itms: [
{ icon: Help, text: 'Help', link:"/"}, { 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() },, { icon: Logout, text: 'Log out', link: () => user.deleteSessions() },,
], ],
}, },