Merge branch 'master' of https://github.com/erant-s-r-o/erant
This commit is contained in:
matthieu42morin
commit
20d1807ab1
|
|
@ -1,266 +1,277 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte'
|
||||||
// 420 px
|
// 420 px
|
||||||
export var images = ["https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg", "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg", "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg", "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg", "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"]
|
export var images = [
|
||||||
|
'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
|
||||||
|
'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
|
||||||
|
'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
|
||||||
|
'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
|
||||||
|
'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
|
||||||
|
]
|
||||||
|
|
||||||
let default_index = 3
|
let default_index = 3
|
||||||
|
|
||||||
let x = 0
|
let x = 0
|
||||||
$: scrollProgress = parseFloat((x/width).toFixed(6))
|
$: scrollProgress = parseFloat((x / width).toFixed(6))
|
||||||
|
|
||||||
let width = null
|
let width = null
|
||||||
let height = null
|
let height = null
|
||||||
|
|
||||||
let func = 0.1
|
let func = 0.1
|
||||||
|
|
||||||
let mp = [-3, -2, -1]
|
let mp = [-3, -2, -1]
|
||||||
let nav = []
|
let nav = []
|
||||||
|
|
||||||
for (let i = 0; i < images.length + 3; i++)
|
for (let i = 0; i < images.length + 3; i++) {
|
||||||
{
|
mp.push(mp.at(-1) + 1)
|
||||||
mp.push(mp.at(-1) + 1)
|
}
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < images.length ; i++)
|
for (let i = 0; i < images.length; i++) {
|
||||||
{
|
if (i === 0) {
|
||||||
if (i === 0){
|
nav.push({ status: 'active' })
|
||||||
nav.push({"status":"active"})
|
} else {
|
||||||
}
|
nav.push({ status: 'wait' })
|
||||||
else{
|
}
|
||||||
nav.push({"status":"wait"})
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let carousel
|
let carousel
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
onLoad(carousel)
|
onLoad(carousel)
|
||||||
window.onresize = () =>{onLoad(carousel)}
|
window.onresize = () => {
|
||||||
});
|
onLoad(carousel)
|
||||||
function onLoad(self) {
|
}
|
||||||
width = self.getBoundingClientRect().width/100*70
|
})
|
||||||
height = self.getBoundingClientRect().width/100*70 / 1.5
|
function onLoad(self) {
|
||||||
images=images;
|
width = (self.getBoundingClientRect().width / 100) * 70
|
||||||
if (self.getBoundingClientRect().width < 440){
|
height = ((self.getBoundingClientRect().width / 100) * 70) / 1.5
|
||||||
func = 0.05
|
images = images
|
||||||
}
|
if (self.getBoundingClientRect().width < 440) {
|
||||||
else{
|
func = 0.05
|
||||||
func = 0.1
|
} else {
|
||||||
}
|
func = 0.1
|
||||||
}
|
}
|
||||||
function getWidth(x){
|
}
|
||||||
var res = width - width*0.3*Math.abs(x)
|
function getWidth(x) {
|
||||||
if (res > 0){return res}
|
var res = width - width * 0.3 * Math.abs(x)
|
||||||
else{return 0}
|
if (res > 0) {
|
||||||
}
|
return res
|
||||||
function getMargin(x){
|
} else {
|
||||||
var m = 1000
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getMargin(x) {
|
||||||
|
var m = 1000
|
||||||
|
|
||||||
if (x<=-1.75){
|
if (x <= -1.75) {
|
||||||
x = -(1.75+(x+1.75))
|
x = -(1.75 + (x + 1.75))
|
||||||
if (x>=0){
|
if (x >= 0) {
|
||||||
x=0
|
x = 0
|
||||||
}
|
}
|
||||||
}
|
} else if (x >= 1.75) {
|
||||||
else if (x>=1.75){
|
x = 1.75 - (x - 1.75)
|
||||||
x = 1.75-(x-1.75)
|
if (x <= 0) {
|
||||||
if (x<=0){
|
x = 0
|
||||||
x=0
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (x > 0){
|
if (x > 0) {
|
||||||
x = Math.abs(x)
|
x = Math.abs(x)
|
||||||
return "margin-left: -"+ m*func*x +"px"
|
return 'margin-left: -' + m * func * x + 'px'
|
||||||
}
|
} else if (x === 0) {
|
||||||
else if (x === 0){return "margin: 0px;"}
|
return 'margin: 0px;'
|
||||||
else{
|
} else {
|
||||||
x = Math.abs(x)
|
x = Math.abs(x)
|
||||||
return "margin-right: -" + m*func*x +"px"
|
return 'margin-right: -' + m * func * x + 'px'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function zIndex(x){
|
function zIndex(x) {
|
||||||
if (x>-0.5&&x<0.5){
|
if (x > -0.5 && x < 0.5) {
|
||||||
return 2
|
return 2
|
||||||
}
|
} else if ((x > -1.5 && x <= -0.5) || (x >= 0.5 && x < 1.5)) {
|
||||||
else if ((x>-1.5&&x<=-0.5)||(x>=0.5&&x<1.5))
|
return 1
|
||||||
{
|
} else if (x <= -2.5 || x >= 2.5) {
|
||||||
return 1
|
return -1
|
||||||
}
|
} else {
|
||||||
else if ((x<=-2.5)||(x>=2.5))
|
return 0
|
||||||
{
|
}
|
||||||
return -1
|
}
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div id=carousel bind:this={carousel} on:scroll={() => x=carousel.scrollLeft} style="height: {height}px;">
|
<div id="carousel" bind:this={carousel} on:scroll={() => (x = carousel.scrollLeft)} style="height: {height}px;">
|
||||||
<div class="sticky">
|
<div class="sticky">
|
||||||
|
{#each Array(default_index) as _, index (index)}
|
||||||
|
<div
|
||||||
|
class="item fake"
|
||||||
|
style="
|
||||||
|
display: {mp.at(index) - scrollProgress <= -3.5 || mp.at(index) - scrollProgress > 3.5 ? 'none' : 'block'};
|
||||||
|
min-width: {getWidth(mp.at(index) - scrollProgress)}px;
|
||||||
|
max-width: {getWidth(mp.at(index) - scrollProgress)}px;
|
||||||
|
min-height: {height + height * (-func * (mp.at(index) - scrollProgress) * (mp.at(index) - scrollProgress))}px;
|
||||||
|
z-index: {zIndex(mp.at(index) - scrollProgress)};
|
||||||
|
{getMargin(mp.at(index) - scrollProgress)};"
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
|
||||||
{#each Array(default_index) as _, index (index)}
|
{#each images as image, index (index)}
|
||||||
<div class="item fake" style="
|
<div
|
||||||
display: {mp.at(index)-scrollProgress<=-3.5||mp.at(index)-scrollProgress>3.5 ? "none" : "block"};
|
class="item real"
|
||||||
min-width: {getWidth(mp.at(index)-scrollProgress)}px;
|
style="text-align:center;
|
||||||
max-width: {getWidth(mp.at(index)-scrollProgress)}px;
|
display: {mp.at(index + default_index) - scrollProgress <= -3.5 || mp.at(index + default_index) - scrollProgress > 3.5 ? 'none' : 'block'};
|
||||||
min-height: {height + height*(-func*(mp.at(index)-scrollProgress)*(mp.at(index)-scrollProgress))}px;
|
min-width: {getWidth(mp.at(index + default_index) - scrollProgress)}px;
|
||||||
z-index: {zIndex(mp.at(index)-scrollProgress)};
|
max-width: {getWidth(mp.at(index + default_index) - scrollProgress)}px;
|
||||||
{getMargin(mp.at(index)-scrollProgress)};">
|
z-index: {zIndex(mp.at(index + default_index) - scrollProgress)};
|
||||||
</div>
|
{getMargin(mp.at(index + default_index) - scrollProgress)}"
|
||||||
{/each}
|
>
|
||||||
|
<img alt="" src={image} />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
{#each images as image, index (index)}
|
{#each Array(3) as _, index (index)}
|
||||||
<div class="item real" style="text-align:center;
|
<div
|
||||||
display: {mp.at(index+default_index)-scrollProgress<=-3.5||mp.at(index+default_index)-scrollProgress>3.5 ? "none" : "block"};
|
class="item fake"
|
||||||
min-width: {getWidth(mp.at(index+default_index)-scrollProgress)}px;
|
style="
|
||||||
max-width: {getWidth(mp.at(index+default_index)-scrollProgress)}px;
|
display: {mp.at(-default_index + index) - scrollProgress <= -3.5 || mp.at(-default_index + index) - scrollProgress > 3.5 ? 'none' : 'block'};
|
||||||
z-index: {zIndex(mp.at(index+default_index)-scrollProgress)};
|
min-width: {getWidth(mp.at(-default_index + index) - scrollProgress)}px;
|
||||||
{getMargin(mp.at(index+default_index)-scrollProgress)}">
|
max-width: {getWidth(mp.at(-default_index + index) - scrollProgress)}px;
|
||||||
<img src={image}>
|
min-height: {height + height * (-func * (mp.at(-default_index + index) - scrollProgress) * (mp.at(-default_index + index) - scrollProgress))}px;
|
||||||
</div>
|
z-index: {zIndex(mp.at(-default_index + index) - scrollProgress)};
|
||||||
{/each}
|
{getMargin(mp.at(-default_index + index) - scrollProgress)}"
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
<div class="overlay" />
|
||||||
|
</div>
|
||||||
|
{#each Array(images.length - 1) as _}
|
||||||
|
<div class="scroll-guide" style="min-width: {width}px; min-height: 10px; scroll-snap-align: start end;" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
{#each Array(3) as _, index (index)}
|
<div class="slide-navigation">
|
||||||
<div class="item fake" style="
|
{#each Array(images.length) as _, index (index)}
|
||||||
display: {mp.at(-default_index+index)-scrollProgress<=-3.5||mp.at(-default_index+index)-scrollProgress>3.5 ? "none" : "block"};
|
{#if Math.round(scrollProgress) == index}
|
||||||
min-width: {getWidth(mp.at(-default_index+index)-scrollProgress)}px;
|
<span class="active" />
|
||||||
max-width: {getWidth(mp.at(-default_index+index)-scrollProgress)}px;
|
{:else}
|
||||||
min-height: {height + height*(-func*(mp.at(-default_index+index)-scrollProgress)*(mp.at(-default_index+index)-scrollProgress))}px;
|
<span />
|
||||||
z-index: {zIndex(mp.at(-default_index+index)-scrollProgress)};
|
{/if}
|
||||||
{getMargin(mp.at(-default_index+index)-scrollProgress)}">
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
|
||||||
<div class="overlay">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#each Array(images.length-1) as _}
|
|
||||||
<div class="scroll-guide" style="min-width: {(width)}px; min-height: 10px; scroll-snap-align: start end;">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="slide-navigation">
|
|
||||||
{#each Array(images.length) as _, index (index)}
|
|
||||||
{#if Math.round(scrollProgress) == index}
|
|
||||||
<span class="active"></span>
|
|
||||||
{:else}
|
|
||||||
<span></span>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container{
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
#carousel{
|
#carousel {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
scroll-snap-type: x mandatory;
|
scroll-snap-type: x mandatory;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
scroll-behavior: auto;
|
scroll-behavior: auto;
|
||||||
}
|
}
|
||||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||||
#carousel::-webkit-scrollbar {
|
#carousel::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide scrollbar for IE, Edge and Firefox */
|
/* Hide scrollbar for IE, Edge and Firefox */
|
||||||
#carousel {
|
#carousel {
|
||||||
-ms-overflow-style: none; /* IE and Edge */
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
scrollbar-width: none; /* Firefox */
|
scrollbar-width: none; /* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
#carousel > .sticky{
|
#carousel > .sticky {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
gap: 0px;
|
gap: 0px;
|
||||||
|
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
scroll-snap-align: end;
|
scroll-snap-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carousel > .sticky > .item{
|
#carousel > .sticky > .item {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
color: white;
|
color: white;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carousel > .sticky > .overlay{
|
#carousel > .sticky > .overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* Mask */
|
/* Mask */
|
||||||
|
|
||||||
background: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 50.56%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.6) 100%);
|
background: linear-gradient(
|
||||||
transform: matrix(1, 0, 0, -1, 0, 0);
|
270deg,
|
||||||
z-index: 10;
|
rgba(255, 255, 255, 0.6) 0%,
|
||||||
}
|
rgba(255, 255, 255, 0.1) 20%,
|
||||||
|
rgba(255, 255, 255, 0) 40%,
|
||||||
|
rgba(255, 255, 255, 0) 50.56%,
|
||||||
|
rgba(255, 255, 255, 0) 60%,
|
||||||
|
rgba(255, 255, 255, 0.1) 80%,
|
||||||
|
rgba(255, 255, 255, 0.6) 100%
|
||||||
|
);
|
||||||
|
transform: matrix(1, 0, 0, -1, 0, 0);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
#carousel > .sticky > .real{
|
#carousel > .sticky > .real {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carousel > .sticky > .real > img{
|
#carousel > .sticky > .real > img {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#carousel > .sticky > .fake {
|
#carousel > .sticky > .fake {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
background-color: white;
|
.slide-navigation {
|
||||||
}
|
height: fit-content;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 5px;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
.slide-navigation{
|
.slide-navigation > span {
|
||||||
height: fit-content;
|
width: 6px;
|
||||||
display: flex;
|
height: 6px;
|
||||||
flex-direction: row;
|
border-radius: 6px;
|
||||||
align-items: center;
|
background-color: #999999;
|
||||||
justify-content: space-evenly;
|
}
|
||||||
gap: 5px;
|
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-navigation > span{
|
.slide-navigation > .active {
|
||||||
width: 6px;
|
background-color: #7b61ff;
|
||||||
height: 6px;
|
}
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-navigation > .active{
|
|
||||||
background-color: #7B61FF;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let active: boolean = false
|
export let active: boolean = false
|
||||||
export let name: string = ''
|
export let name: string = ''
|
||||||
export let url: string = ''
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button on:click>
|
<button on:click>
|
||||||
|
|
|
||||||
|
|
@ -1,181 +1,181 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { user } from '$lib/appwrite'
|
import { user } from '$lib/appwrite'
|
||||||
import collections from '$lib/collections'
|
import collections from '$lib/collections'
|
||||||
import { Query } from 'appwrite'
|
import { Query } from 'appwrite'
|
||||||
import { navigate } from 'svelte-routing'
|
import { navigate } from 'svelte-routing'
|
||||||
|
|
||||||
export let current_state = 1
|
export let current_state = 1
|
||||||
|
|
||||||
$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')])
|
$: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')])
|
||||||
$: console.log($user)
|
$: console.log($user)
|
||||||
|
|
||||||
let container
|
let container
|
||||||
let scroll_distance
|
let scroll_distance
|
||||||
|
|
||||||
let selected_inputs = {}
|
let selected_inputs = {}
|
||||||
|
|
||||||
function change_state(){
|
function change_state() {
|
||||||
const input = event.currentTarget as HTMLInputElement
|
const input = event.currentTarget as HTMLInputElement
|
||||||
|
|
||||||
if (input){
|
if (input) {
|
||||||
var input_type = input.parentElement.parentElement.parentElement.classList[1]
|
var input_type = input.parentElement.parentElement.parentElement.classList[1]
|
||||||
selected_inputs[input_type] = input.parentElement.querySelector("p").innerText
|
selected_inputs[input_type] = input.parentElement.querySelector('p').innerText
|
||||||
console.log(selected_inputs)
|
console.log(selected_inputs)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (current_state + 1 === 4){
|
if (current_state + 1 === 4) {
|
||||||
navigate(`/profile/${$userInfo?.erantId}`)
|
navigate(`/profile/${$userInfo?.erantId}`)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
current_state = current_state + 1
|
current_state = current_state + 1
|
||||||
|
|
||||||
container.scroll({
|
container.scroll({
|
||||||
top: 0,
|
top: 0,
|
||||||
left: scroll_distance * (current_state-1),
|
left: scroll_distance * (current_state - 1),
|
||||||
behavior: 'smooth'
|
behavior: 'smooth',
|
||||||
})
|
})
|
||||||
}, 300)
|
}, 300)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={container} bind:clientWidth={scroll_distance} class="container">
|
<div bind:this={container} bind:clientWidth={scroll_distance} class="container">
|
||||||
<div class="container_page interests">
|
<div class="container_page interests">
|
||||||
<h2>What are you most interested in?</h2>
|
<h2>What are you most interested in?</h2>
|
||||||
|
|
||||||
<div class="radio_container">
|
<div class="radio_container">
|
||||||
<label class="item">
|
<label class="item">
|
||||||
<input type="radio" on:change={change_state} name="interests">
|
<input type="radio" on:change={change_state} name="interests" />
|
||||||
<div>
|
<div>
|
||||||
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
<img alt="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
|
||||||
<p>Fun</p>
|
<p>Fun</p>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="item">
|
<label class="item">
|
||||||
<input type="radio" on:change={change_state} name="interests">
|
<input type="radio" on:change={change_state} name="interests" />
|
||||||
<div>
|
<div>
|
||||||
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
<img alt="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
|
||||||
<p>Fun</p>
|
<p>Fun</p>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container_page travel">
|
<div class="container_page travel">
|
||||||
<h2>Who do you like to travel with?</h2>
|
<h2>Who do you like to travel with?</h2>
|
||||||
<div class="radio_container">
|
<div class="radio_container">
|
||||||
<label class="item">
|
<label class="item">
|
||||||
<input type="radio" on:change={change_state} name="travel">
|
<input type="radio" on:change={change_state} name="travel" />
|
||||||
<div>
|
<div>
|
||||||
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
<img alt="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
|
||||||
<p>Fun</p>
|
<p>Fun</p>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container_page to_us">
|
<div class="container_page to_us">
|
||||||
<h2>What brought you to our app?</h2>
|
<h2>What brought you to our app?</h2>
|
||||||
<div class="radio_container">
|
<div class="radio_container">
|
||||||
<label class="item">
|
<label class="item">
|
||||||
<input type="radio" on:change={change_state} name="to_us">
|
<input type="radio" on:change={change_state} name="to_us" />
|
||||||
<div>
|
<div>
|
||||||
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
|
<img alt="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
|
||||||
<p>Fun</p>
|
<p>Fun</p>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.container{
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
scroll-snap-type: x mandatory;
|
scroll-snap-type: x mandatory;
|
||||||
|
|
||||||
-ms-overflow-style: none; /* IE and Edge */
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
scrollbar-width: none; /* Firefox */
|
scrollbar-width: none; /* Firefox */
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.container_page {
|
.container_page {
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
|
||||||
padding: 0px 22px;
|
padding: 0px 22px;
|
||||||
scroll-snap-align: center;
|
scroll-snap-align: center;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
h2{
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio_container {
|
.radio_container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
.item{
|
.item {
|
||||||
input{
|
input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
div{
|
div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
width: 145px;
|
width: 145px;
|
||||||
|
|
||||||
/* Main Blue */
|
/* Main Blue */
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid #4264eb00;
|
border: 1px solid #4264eb00;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
p{
|
p {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:has(input:checked){
|
.item:has(input:checked) {
|
||||||
div{
|
div {
|
||||||
border: 1px dashed #4263EB;
|
border: 1px dashed #4263eb;
|
||||||
p{
|
p {
|
||||||
color: #4263EB;
|
color: #4263eb;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -231,27 +231,6 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginButton {
|
|
||||||
background-color: #4263eb;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 40px;
|
|
||||||
padding: 12px 0px;
|
|
||||||
border-radius: 15px;
|
|
||||||
|
|
||||||
@media screen and (max-height: 820px) {
|
|
||||||
font-size: 3.9vh;
|
|
||||||
line-height: 4.8vh;
|
|
||||||
padding: 1.4vh 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,65 @@
|
||||||
<script>
|
<script>
|
||||||
import { navigate } from "svelte-routing"
|
import { navigate } from 'svelte-routing'
|
||||||
|
|
||||||
export let location = "Home"
|
export let location = 'Home'
|
||||||
export let name = "Kawa Ijen"
|
export let name = 'Kawa Ijen'
|
||||||
export let image = ""
|
export let image = ''
|
||||||
export let link = ""
|
export let link = ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button on:click={navigate(`${link}`)}>
|
<button on:click={navigate(`${link}`)}>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
{#if image !== ""}
|
{#if image !== ''}
|
||||||
<img style="flex-grow: 1;" src={image}>
|
<img alt="" style="flex-grow: 1;" src={image} />
|
||||||
{/if}
|
{/if}
|
||||||
<div class="bookmark">
|
<div class="bookmark">
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<mask id="mask0_1402_894" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="12" height="15">
|
<mask id="mask0_1402_894" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="1" width="12" height="15">
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1.33301H13.3592V15.2308H2V1.33301Z" fill="white"/>
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1.33301H13.3592V15.2308H2V1.33301Z" fill="white" />
|
||||||
</mask>
|
</mask>
|
||||||
<g mask="url(#mask0_1402_894)">
|
<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
|
||||||
</g>
|
fill-rule="evenodd"
|
||||||
</svg>
|
clip-rule="evenodd"
|
||||||
</div>
|
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>
|
<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"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
<div class="info">
|
{location}
|
||||||
<h3>{name}</h3>
|
</div>
|
||||||
<div>
|
</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"/>
|
|
||||||
<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"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
{location}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
button{
|
button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 8px 12px 8px;
|
padding: 8px 8px 12px 8px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
||||||
|
|
@ -57,80 +71,60 @@
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
border: 1px solid #EFEFF0;
|
border: 1px solid #efeff0;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, button:active{
|
button:hover,
|
||||||
|
button:active {
|
||||||
opacity: 70%;
|
opacity: 70%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
button > .image{
|
button > .image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
|
|
||||||
/* background */
|
/* background */
|
||||||
|
|
||||||
background-color: #EFEFF0;
|
background-color: #efeff0;
|
||||||
/* subtle-light */
|
/* subtle-light */
|
||||||
|
|
||||||
border: 2px solid #AFB1B6;
|
border: 2px solid #afb1b6;
|
||||||
border-radius: 20px;
|
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-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;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 400px){
|
@media screen and (max-width: 400px) {
|
||||||
button > .image{
|
button > .image {
|
||||||
height: 50vw;
|
height: 50vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
button > .image > .bookmark {
|
||||||
}
|
|
||||||
|
|
||||||
button > .image > .bookmark{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
background: #4263EB;
|
background: #4263eb;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button > .image > .price{
|
button > .info {
|
||||||
position: absolute;
|
|
||||||
padding: 4px 8px 4px 8px;
|
|
||||||
height: 28px;
|
|
||||||
left: 12px;
|
|
||||||
bottom: 12px;
|
|
||||||
background: #4263EB;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Work Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
button > .info{
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
@ -139,16 +133,16 @@
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button > .info > h3{
|
button > .info > h3 {
|
||||||
font-family: 'Source Sans Pro';
|
font-family: 'Source Sans Pro';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
color: #19191B;
|
color: #19191b;
|
||||||
}
|
}
|
||||||
|
|
||||||
button > .info > div{
|
button > .info > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -160,6 +154,6 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: #61646B;
|
color: #61646b;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,88 +1,89 @@
|
||||||
<script>
|
<script>
|
||||||
import Filter from "./Filter.svelte"
|
import Filter from './Filter.svelte'
|
||||||
import Search from "./Search.svelte";
|
import Search from './Search.svelte'
|
||||||
|
|
||||||
export let search_value
|
export let search_value
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<Search bind:search_value={search_value}/>
|
<Search bind:search_value />
|
||||||
|
|
||||||
<button class="options">
|
<button class="options">
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40006 15.4941H3.14923C2.80423 15.4941 2.52423 15.2141 2.52423 14.8691C2.52423 14.5241 2.80423 14.2441 3.14923 14.2441H8.40006C8.74506 14.2441 9.02506 14.5241 9.02506 14.8691C9.02506 15.2141 8.74506 15.4941 8.40006 15.4941Z" fill="black"/>
|
<path
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9924 7.41699H10.7424C10.3974 7.41699 10.1174 7.13699 10.1174 6.79199C10.1174 6.44699 10.3974 6.16699 10.7424 6.16699H15.9924C16.3374 6.16699 16.6174 6.44699 16.6174 6.79199C16.6174 7.13699 16.3374 7.41699 15.9924 7.41699Z" fill="black"/>
|
fill-rule="evenodd"
|
||||||
<mask id="mask0_1630_1934" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="6" height="6">
|
clip-rule="evenodd"
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 4.16699H7.68817V9.32666H2.5V4.16699Z" fill="white"/>
|
d="M8.40006 15.4941H3.14923C2.80423 15.4941 2.52423 15.2141 2.52423 14.8691C2.52423 14.5241 2.80423 14.2441 3.14923 14.2441H8.40006C8.74506 14.2441 9.02506 14.5241 9.02506 14.8691C9.02506 15.2141 8.74506 15.4941 8.40006 15.4941Z"
|
||||||
</mask>
|
fill="black"
|
||||||
<g mask="url(#mask0_1630_1934)">
|
/>
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.09398 5.4165C4.35315 5.4165 3.74982 6.01317 3.74982 6.74734C3.74982 7.48067 4.35315 8.0765 5.09398 8.0765C5.83565 8.0765 6.43815 7.48067 6.43815 6.74734C6.43815 6.01317 5.83565 5.4165 5.09398 5.4165ZM5.09398 9.3265C3.66398 9.3265 2.49982 8.16984 2.49982 6.74734C2.49982 5.32484 3.66398 4.1665 5.09398 4.1665C6.52482 4.1665 7.68815 5.32484 7.68815 6.74734C7.68815 8.16984 6.52482 9.3265 5.09398 9.3265Z" fill="black"/>
|
<path
|
||||||
</g>
|
fill-rule="evenodd"
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4898 13.5068C13.7481 13.5068 13.1448 14.1035 13.1448 14.8368C13.1448 15.571 13.7481 16.1668 14.4898 16.1668C15.2306 16.1668 15.8331 15.571 15.8331 14.8368C15.8331 14.1035 15.2306 13.5068 14.4898 13.5068ZM14.4898 17.4168C13.0589 17.4168 11.8948 16.2593 11.8948 14.8368C11.8948 13.4143 13.0589 12.2568 14.4898 12.2568C15.9198 12.2568 17.0831 13.4143 17.0831 14.8368C17.0831 16.2593 15.9198 17.4168 14.4898 17.4168Z" fill="black"/>
|
clip-rule="evenodd"
|
||||||
</svg>
|
d="M15.9924 7.41699H10.7424C10.3974 7.41699 10.1174 7.13699 10.1174 6.79199C10.1174 6.44699 10.3974 6.16699 10.7424 6.16699H15.9924C16.3374 6.16699 16.6174 6.44699 16.6174 6.79199C16.6174 7.13699 16.3374 7.41699 15.9924 7.41699Z"
|
||||||
</button>
|
fill="black"
|
||||||
</div>
|
/>
|
||||||
<!--<div class="filters">
|
<mask id="mask0_1630_1934" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="6" height="6">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 4.16699H7.68817V9.32666H2.5V4.16699Z" fill="white" />
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_1630_1934)">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M5.09398 5.4165C4.35315 5.4165 3.74982 6.01317 3.74982 6.74734C3.74982 7.48067 4.35315 8.0765 5.09398 8.0765C5.83565 8.0765 6.43815 7.48067 6.43815 6.74734C6.43815 6.01317 5.83565 5.4165 5.09398 5.4165ZM5.09398 9.3265C3.66398 9.3265 2.49982 8.16984 2.49982 6.74734C2.49982 5.32484 3.66398 4.1665 5.09398 4.1665C6.52482 4.1665 7.68815 5.32484 7.68815 6.74734C7.68815 8.16984 6.52482 9.3265 5.09398 9.3265Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M14.4898 13.5068C13.7481 13.5068 13.1448 14.1035 13.1448 14.8368C13.1448 15.571 13.7481 16.1668 14.4898 16.1668C15.2306 16.1668 15.8331 15.571 15.8331 14.8368C15.8331 14.1035 15.2306 13.5068 14.4898 13.5068ZM14.4898 17.4168C13.0589 17.4168 11.8948 16.2593 11.8948 14.8368C11.8948 13.4143 13.0589 12.2568 14.4898 12.2568C15.9198 12.2568 17.0831 13.4143 17.0831 14.8368C17.0831 16.2593 15.9198 17.4168 14.4898 17.4168Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!--<div class="filters">
|
||||||
<Filter name="Some filter" />
|
<Filter name="Some filter" />
|
||||||
<Filter name="Some filter n.2" />
|
<Filter name="Some filter n.2" />
|
||||||
</div>-->
|
</div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.top{
|
.top {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 44px 16px 20px 16px;
|
padding: 44px 16px 20px 16px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
border-bottom: 1px solid #EFEFF0;
|
border-bottom: 1px solid #efeff0;
|
||||||
|
|
||||||
.actions{
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
|
|
||||||
gap:16px;
|
gap: 16px;
|
||||||
|
|
||||||
.options{
|
.options {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
|
||||||
background: #EFEFF0;
|
background: #efeff0;
|
||||||
border-radius: 228px;
|
border-radius: 228px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
.options:hover {
|
||||||
.options:hover{
|
opacity: 50%;
|
||||||
opacity: 50%;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
gap:12px;
|
|
||||||
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
overflow: scroll;
|
|
||||||
scrollbar-width: none;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Layout from '../Components/Layout.svelte'
|
import Layout from '../Components/Layout.svelte'
|
||||||
import { checkPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: checkPoint }
|
export let data: { name: string; checkPoint: CheckPoint }
|
||||||
const { checkPoint, name } = data
|
const { checkPoint, name } = data
|
||||||
|
|
||||||
export let nextQuestion
|
export let nextQuestion
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Layout from '../Components/Layout.svelte'
|
import Layout from '../Components/Layout.svelte'
|
||||||
import CheckBox from '../../../lib/components/Inputs/Checkbox.svelte'
|
import CheckBox from '../../../lib/components/Inputs/Checkbox.svelte'
|
||||||
import { checkPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/game'
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: checkPoint }
|
export let data: { name: string; checkPoint: CheckPoint }
|
||||||
const { checkPoint, name } = data
|
const { checkPoint, name } = data
|
||||||
let myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
|
let myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Layout from '../Components/Layout.svelte'
|
import Layout from '../Components/Layout.svelte'
|
||||||
import Input from '../../../lib/components/Inputs/Input.svelte'
|
import Input from '../../../lib/components/Inputs/Input.svelte'
|
||||||
import { checkPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/game'
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: checkPoint }
|
export let data: { name: string; checkPoint: CheckPoint }
|
||||||
const { checkPoint, name } = data
|
const { checkPoint, name } = data
|
||||||
let myAnswer = ''
|
let myAnswer = ''
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Radio from '../../../lib/components/Inputs/Radio.svelte'
|
import Radio from '../../../lib/components/Inputs/Radio.svelte'
|
||||||
import Layout from '../Components/Layout.svelte'
|
import Layout from '../Components/Layout.svelte'
|
||||||
import { checkPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/game'
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: checkPoint }
|
export let data: { name: string; checkPoint: CheckPoint }
|
||||||
const { checkPoint, name } = data
|
const { checkPoint, name } = data
|
||||||
let myAnswer = ''
|
let myAnswer = ''
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Layout from '../Components/Layout.svelte'
|
import Layout from '../Components/Layout.svelte'
|
||||||
import Input from '../../../lib/components/Inputs/Input.svelte'
|
import Input from '../../../lib/components/Inputs/Input.svelte'
|
||||||
import { checkPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/game'
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: checkPoint }
|
export let data: { name: string; checkPoint: CheckPoint }
|
||||||
const { checkPoint, name } = data
|
const { checkPoint, name } = data
|
||||||
let myAnswer = ''
|
let myAnswer = ''
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,34 @@
|
||||||
<script>
|
<script>
|
||||||
export let text = ""
|
export let text = ''
|
||||||
export let imgLink = ""
|
export let imgLink = ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button>
|
<button>
|
||||||
<div>
|
<div>
|
||||||
{#if imgLink !== ""}
|
{#if imgLink !== ''}
|
||||||
<img style="flex-grow: 1" src={imgLink}>
|
<img alt="" style="flex-grow: 1" src={imgLink} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<h3>
|
<h3>
|
||||||
{text}
|
{text}
|
||||||
</h3>
|
</h3>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
button{
|
button {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
color: #61646B;
|
color: #61646b;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active, button:hover{
|
button:active,
|
||||||
|
button:hover {
|
||||||
opacity: 70%;
|
opacity: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button > h3{
|
button > h3 {
|
||||||
font-family: 'Source Sans Pro';
|
font-family: 'Source Sans Pro';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -34,26 +36,26 @@
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button > div{
|
button > div {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
overflow: none;
|
overflow: none;
|
||||||
background-color: #EFEFF0;
|
background-color: #efeff0;
|
||||||
|
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
border: 2px solid #AFB1B6;
|
border: 2px solid #afb1b6;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
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-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-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 370px){
|
@media screen and (max-width: 370px) {
|
||||||
button {
|
button {
|
||||||
gap: 2.5vw;
|
gap: 2.5vw;
|
||||||
}
|
}
|
||||||
|
|
@ -62,5 +64,4 @@
|
||||||
height: 18vw;
|
height: 18vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
<div class="options">
|
<div class="options">
|
||||||
{#each items as item}
|
{#each items as item}
|
||||||
<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} price={item.price} location={item.location} name={item.ExpName} image={item.image} />
|
<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} price={item.price} location={item.location} name={item.ExpName} image={item.ExpImage} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<button on:click>
|
<button on:click>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
{#if image !== ''}
|
{#if image !== ''}
|
||||||
<img style="flex-grow: 1;" src={image} />
|
<img alt="" style="flex-grow: 1;" src={image} />
|
||||||
{/if}
|
{/if}
|
||||||
<div class="bookmark">
|
<div class="bookmark">
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
|
||||||
|
|
@ -58,13 +58,6 @@
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
button {
|
|
||||||
position: absolute;
|
|
||||||
left: 8px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
min-height: 30px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue