commit
0015ae6b63
|
@ -4,7 +4,7 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite --host",
|
||||||
"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"
|
||||||
|
|
|
@ -0,0 +1,181 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { user } from '$lib/appwrite'
|
||||||
|
import collections from '$lib/collections'
|
||||||
|
import { Query } from 'appwrite'
|
||||||
|
import { navigate } from 'svelte-routing'
|
||||||
|
|
||||||
|
export let current_state = 1
|
||||||
|
|
||||||
|
$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')])
|
||||||
|
$: console.log($user)
|
||||||
|
|
||||||
|
let container
|
||||||
|
let scroll_distance
|
||||||
|
|
||||||
|
let selected_inputs = {}
|
||||||
|
|
||||||
|
function change_state(){
|
||||||
|
const input = event.currentTarget as HTMLInputElement
|
||||||
|
|
||||||
|
if (input){
|
||||||
|
var input_type = input.parentElement.parentElement.parentElement.classList[1]
|
||||||
|
selected_inputs[input_type] = input.parentElement.querySelector("p").innerText
|
||||||
|
console.log(selected_inputs)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (current_state + 1 === 4){
|
||||||
|
navigate(`/profile/${$userInfo?.erantId}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
current_state = current_state + 1
|
||||||
|
|
||||||
|
container.scroll({
|
||||||
|
top: 0,
|
||||||
|
left: scroll_distance * (current_state-1),
|
||||||
|
behavior: 'smooth'
|
||||||
|
})
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={container} bind:clientWidth={scroll_distance} class="container">
|
||||||
|
<div class="container_page interests">
|
||||||
|
<h2>What are you most interested in?</h2>
|
||||||
|
|
||||||
|
<div class="radio_container">
|
||||||
|
<label class="item">
|
||||||
|
<input type="radio" on:change={change_state} name="interests">
|
||||||
|
<div>
|
||||||
|
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
||||||
|
<p>Fun</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="item">
|
||||||
|
<input type="radio" on:change={change_state} name="interests">
|
||||||
|
<div>
|
||||||
|
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
||||||
|
<p>Fun</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container_page travel">
|
||||||
|
<h2>Who do you like to travel with?</h2>
|
||||||
|
<div class="radio_container">
|
||||||
|
<label class="item">
|
||||||
|
<input type="radio" on:change={change_state} name="travel">
|
||||||
|
<div>
|
||||||
|
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
||||||
|
<p>Fun</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container_page to_us">
|
||||||
|
<h2>What brought you to our app?</h2>
|
||||||
|
<div class="radio_container">
|
||||||
|
<label class="item">
|
||||||
|
<input type="radio" on:change={change_state} name="to_us">
|
||||||
|
<div>
|
||||||
|
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
||||||
|
<p>Fun</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
gap: 10px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
scroll-snap-type: x mandatory;
|
||||||
|
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container_page {
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
|
||||||
|
padding: 0px 22px;
|
||||||
|
scroll-snap-align: center;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
h2{
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio_container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
.item{
|
||||||
|
input{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-self: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 7px;
|
||||||
|
width: 145px;
|
||||||
|
|
||||||
|
/* Main Blue */
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #4264eb00;
|
||||||
|
|
||||||
|
img {
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 18px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:has(input:checked){
|
||||||
|
div{
|
||||||
|
border: 1px dashed #4263EB;
|
||||||
|
p{
|
||||||
|
color: #4263EB;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -44,7 +44,7 @@
|
||||||
<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
|
<div class={'section w-full h-[calc(100%-100px)] overflow-auto ' + className}><slot /></div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
{#each items as { name, url, image_url }}
|
{#each items as { name, url, image_url }}
|
||||||
{#if location.pathname === url || location.pathname.includes(url + '/')}
|
{#if location.pathname === url || location.pathname.includes("/" + url.split("/")[0] + '/')}
|
||||||
<FooterItem on:click={() => navigate(url)} active={true} {name} {url}>
|
<FooterItem on:click={() => navigate(url)} active={true} {name} {url}>
|
||||||
<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
|
<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
|
||||||
</FooterItem>
|
</FooterItem>
|
||||||
|
|
|
@ -50,11 +50,14 @@
|
||||||
transition: flex-grow 2s;
|
transition: flex-grow 2s;
|
||||||
transition-delay: 2000ms;
|
transition-delay: 2000ms;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
|
||||||
&::placeholder{
|
&::placeholder{
|
||||||
color: #AFB1B6;
|
color: #AFB1B6;
|
||||||
}
|
}
|
||||||
&:focus, &:focus-visible {
|
&:focus, &:focus-visible {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
box-shadow: none;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,70 +1,58 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Line from "$lib/components/Common/Line.svelte";
|
import Interests from "$lib/components/Interests/Interests.svelte"
|
||||||
function select_tag(){
|
|
||||||
const target = event.currentTarget as HTMLElement
|
|
||||||
|
|
||||||
console.log(target)
|
let current_state = 1
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="headline">What are you most interested in?</p>
|
<Interests bind:current_state={current_state} />
|
||||||
<div class="tag-container-selected">
|
|
||||||
|
|
||||||
</div>
|
<div class="navigation">
|
||||||
<Line />
|
{#each Array(3) as _, index (index)}
|
||||||
<div class="tag-container">
|
{#if index === current_state-1}
|
||||||
<button class="tag" on:click={select_tag}>History</button>
|
<div class="selected" />
|
||||||
<button class="tag" on:click={select_tag}>Pubs</button>
|
{:else}
|
||||||
|
<div />
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.container{
|
.container{
|
||||||
padding: 0 24px;
|
flex-grow: 1;
|
||||||
display: flex;
|
overflow-y: scroll;
|
||||||
flex-direction: column;
|
overflow-x: hidden;
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
text-align: left;
|
position: relative;
|
||||||
.headline{
|
|
||||||
width: 100%;
|
|
||||||
/* Label Large - Source Sans Pro/Medium 16/24 . +0.2 */
|
|
||||||
|
|
||||||
font-family: 'Source Sans Pro';
|
.navigation {
|
||||||
font-style: normal;
|
position: absolute;
|
||||||
font-weight: 600;
|
height: 12px;
|
||||||
font-size: 18px;
|
|
||||||
line-height: 28px;
|
bottom: 15px;
|
||||||
/* or 156% */
|
left: 50%;
|
||||||
|
|
||||||
|
transform: translate(-50%, -0%);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
letter-spacing: 0.2px;
|
gap: 8px;
|
||||||
|
|
||||||
color: #000000;
|
div{
|
||||||
}
|
background-color: #BBD1C5;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
.tag-container, .tag-container-selected{
|
width: 12px;
|
||||||
width: 100%;
|
height: 12px;
|
||||||
display: flex;
|
}
|
||||||
margin: 16px 0;
|
|
||||||
flex-wrap: wrap;
|
.selected{
|
||||||
gap: 16px 24px;
|
transition-delay: 0.25s;
|
||||||
.tag{
|
width: 46px;
|
||||||
padding: 4px 10px;
|
background-color: #14A6AE;
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px 0px 20px -6px rgba(0, 0, 0, 0.45);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -24,43 +24,54 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="head">
|
<div class="main">
|
||||||
<button
|
<div class="head">
|
||||||
on:click={() => {
|
<button
|
||||||
navigate('/profile')
|
on:click={() => {
|
||||||
}}
|
navigate('/profile')
|
||||||
>
|
}}
|
||||||
<ArrowBack />
|
>
|
||||||
</button>
|
<ArrowBack />
|
||||||
<h1>{data.display_name}</h1>
|
</button>
|
||||||
|
<h1>{data.display_name}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svelte:component this={data.view} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svelte:component this={data.view} />
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.head {
|
.main{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: stretch;
|
||||||
gap: 16px;
|
height: 100%;
|
||||||
margin-top: 16px;
|
.head {
|
||||||
margin-bottom: 20px;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
h1 {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 40px;
|
|
||||||
|
|
||||||
color: #000000;
|
h1 {
|
||||||
margin: 0;
|
font-weight: 600;
|
||||||
}
|
font-size: 32px;
|
||||||
button {
|
line-height: 40px;
|
||||||
position: absolute;
|
|
||||||
left: 8px;
|
color: #000000;
|
||||||
top: 50%;
|
margin: 0;
|
||||||
transform: translate(0, -50%);
|
}
|
||||||
min-height: 30px;
|
button {
|
||||||
|
position: absolute;
|
||||||
|
left: 8px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
min-height: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -16,9 +16,10 @@
|
||||||
import collections from '$lib/collections'
|
import collections from '$lib/collections'
|
||||||
import { Query } from 'appwrite'
|
import { Query } from 'appwrite'
|
||||||
|
|
||||||
|
|
||||||
export let params: { erantId: string }
|
export let params: { erantId: string }
|
||||||
//
|
//
|
||||||
$: [userInfo] = collections.users.getDocument([Query.equal('erantId', params.erantId)])
|
$: [userInfo] = collections.users.getDocument([Query.equal('userID', params.erantId)])
|
||||||
|
|
||||||
$: console.log($user)
|
$: console.log($user)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue