Pr/kuba #16
File diff suppressed because it is too large
Load Diff
|
|
@ -5,6 +5,8 @@
|
||||||
import Error from './routes/error.svelte'
|
import Error from './routes/error.svelte'
|
||||||
import Game from './routes/game.svelte'
|
import Game from './routes/game.svelte'
|
||||||
import Index from './routes/index.svelte'
|
import Index from './routes/index.svelte'
|
||||||
|
import Test from './routes/test.svelte'
|
||||||
|
import Test2 from './routes/map.svelte'
|
||||||
|
|
||||||
if ('serviceWorker' in window.navigator) {
|
if ('serviceWorker' in window.navigator) {
|
||||||
window.navigator.serviceWorker.register('/serviceworker.js', {
|
window.navigator.serviceWorker.register('/serviceworker.js', {
|
||||||
|
|
@ -17,7 +19,8 @@
|
||||||
<Router>
|
<Router>
|
||||||
<Route path="/" component={Index} />
|
<Route path="/" component={Index} />
|
||||||
<Route path="/error" component={Error} />
|
<Route path="/error" component={Error} />
|
||||||
|
<Route path="/test" component={Test} />
|
||||||
|
<Route path="/map" component={Test2} />
|
||||||
<Route path="/:gameurl" let:params>
|
<Route path="/:gameurl" let:params>
|
||||||
<Game gameurl={params.gameurl} />
|
<Game gameurl={params.gameurl} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
@ -31,6 +34,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
max-width: var(--max-viewport-width);
|
max-width: var(--max-viewport-width);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,16 @@
|
||||||
import { Marker } from '@beyonk/svelte-mapbox'
|
import { Marker } from '@beyonk/svelte-mapbox'
|
||||||
import { createEventDispatcher, getContext } from 'svelte'
|
import { createEventDispatcher, getContext } from 'svelte'
|
||||||
|
|
||||||
export let lat, lng
|
export let lat = 0
|
||||||
export let width = 0.004
|
export let lng = 0
|
||||||
|
export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
|
||||||
|
console.log({ round, lat, lng })
|
||||||
export let user = { lat: 0, lng: 0 }
|
export let user = { lat: 0, lng: 0 }
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
let Mlat = [lat - width, lat + width]
|
let Mlat = [lat - round, lat + round]
|
||||||
let Mlng = [lng - width, lng + width]
|
let Mlng = [lng - round, lng + round]
|
||||||
|
|
||||||
$: isIn = user ? user.lat > Mlat[0] && user.lat < Mlat[1] && user.lng > Mlng[0] && user.lng < Mlng[1] : null
|
$: isIn = user ? user.lat > Mlat[0] && user.lat < Mlat[1] && user.lng > Mlng[0] && user.lng < Mlng[1] : null
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
import { Map, controls } from '@beyonk/svelte-mapbox'
|
import { Map, controls } from '@beyonk/svelte-mapbox'
|
||||||
import { createEventDispatcher } from 'svelte'
|
import { createEventDispatcher } from 'svelte'
|
||||||
|
import { loop_guard } from 'svelte/internal'
|
||||||
const { GeolocateControl } = controls
|
const { GeolocateControl } = controls
|
||||||
let mapComponent
|
let mapComponent
|
||||||
|
let geolocateControl
|
||||||
let className = ''
|
let className = ''
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
|
||||||
|
|
@ -12,6 +14,20 @@
|
||||||
|
|
||||||
export let radius = false
|
export let radius = false
|
||||||
export let center = { lng: 0, lat: 0 }
|
export let center = { lng: 0, lat: 0 }
|
||||||
|
export const geo = (e) => {
|
||||||
|
|
||||||
|
geolocateControl.dispatchEvent('geolocate')
|
||||||
|
if (navigator.geolocation) {
|
||||||
|
navigator.geolocation.getCurrentPosition((position)=>{
|
||||||
|
const { latitude, longitude } = position.coords
|
||||||
|
user = { lat: latitude, lng: longitude }
|
||||||
|
dispatch('move', user)
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert("Can't load your location!")
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={className} class:radius>
|
<div class={className} class:radius>
|
||||||
|
|
@ -23,17 +39,20 @@
|
||||||
on:ready={() => {
|
on:ready={() => {
|
||||||
mapComponent.resize()
|
mapComponent.resize()
|
||||||
mapComponent.setCenter([center.lng, center.lat], 14)
|
mapComponent.setCenter([center.lng, center.lat], 14)
|
||||||
|
|
||||||
}}
|
}}
|
||||||
zoom={14}
|
zoom={14}
|
||||||
>
|
>
|
||||||
<slot {user} />
|
<slot {user} />
|
||||||
<GeolocateControl
|
<GeolocateControl
|
||||||
on:geolocate={(e) => {
|
bind:this={geolocateControl}
|
||||||
const { latitude, longitude } = e.detail.coords
|
on:geolocate={(e) => {
|
||||||
user = { lat: latitude, lng: longitude }
|
console.log(e)
|
||||||
dispatch('move', user)
|
const { latitude, longitude } = e.detail.coords
|
||||||
}}
|
user = { lat: latitude, lng: longitude }
|
||||||
/>
|
dispatch('move', user)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Map>
|
</Map>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { navigate } from "svelte-routing"
|
||||||
|
|
||||||
|
|
||||||
|
export let active:boolean = false
|
||||||
|
export let name: string = ""
|
||||||
|
export let url: string = ""
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
on:click={()=>{
|
||||||
|
if (!active){
|
||||||
|
navigate(url)
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<slot/>
|
||||||
|
{#if active}
|
||||||
|
<p class="active" style="color:#4263EB">{name}</p>
|
||||||
|
{:else}
|
||||||
|
<p>{name}</p>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');
|
||||||
|
button{
|
||||||
|
height: 54px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover, button:active{
|
||||||
|
opacity: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > p{
|
||||||
|
font-family: 'Work Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 16px;
|
||||||
|
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
color: #61646B;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<script>
|
||||||
|
import FooterItem from "./NavBar_Item.svelte";
|
||||||
|
|
||||||
|
//Do not change!!!
|
||||||
|
export let items = [{"name":"Home", "active":true, "url":"/" ,"image_url": "data:image/svg+xml,%3Csvg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1572 22.2352V18.6679C8.1572 17.7573 8.90083 17.019 9.81813 17.019H13.1713C13.6118 17.019 14.0343 17.1928 14.3458 17.502C14.6573 17.8112 14.8323 18.2306 14.8323 18.6679V22.2352C14.8295 22.6138 14.979 22.9779 15.2477 23.2465C15.5164 23.5152 15.882 23.6663 16.2634 23.6663H18.5511C19.6195 23.6691 20.6452 23.2497 21.4017 22.5006C22.1581 21.7516 22.5833 20.7345 22.5833 19.6738V9.51101C22.5833 8.65421 22.2007 7.84149 21.5387 7.29179L13.7563 1.12152C12.4026 0.0396631 10.4629 0.0745936 9.14958 1.20448L1.54481 7.29179C0.85149 7.82529 0.437104 8.64042 0.416626 9.51101V19.6634C0.416626 21.8742 2.2219 23.6663 4.44883 23.6663H6.6843C7.47639 23.6663 8.12012 23.0319 8.12586 22.2456L8.1572 22.2352Z' fill='%2361646B'/%3E%3C/svg%3E%0A"},
|
||||||
|
{"name":"Explore", "active":false, "url":"" , "image_url":"data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.58 11.0798L10.3585 14.9846L14.2622 13.7619L15.4848 9.85711L11.58 11.0798ZM9.02384 17.1931C8.79517 17.1931 8.57117 17.1033 8.40434 16.9376C8.17451 16.7066 8.09051 16.3671 8.18851 16.0579L10.047 10.1208C10.1322 9.84545 10.3468 9.63195 10.6198 9.54678L16.557 7.68828C16.8685 7.58911 17.2068 7.67428 17.4378 7.90411C17.6677 8.13511 17.7517 8.47461 17.6537 8.78378L15.7963 14.7209C15.7112 14.9951 15.4953 15.2098 15.2223 15.2949L9.28517 17.1534C9.19884 17.1803 9.11017 17.1931 9.02384 17.1931Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_2517' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='25'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833374 0.333008H25.0088V24.5083H0.833374V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2517)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.921 2.08301C7.22063 2.08301 2.58313 6.72167 2.58313 12.4208C2.58313 18.1212 7.22063 22.7587 12.921 22.7587C18.6213 22.7587 23.2588 18.1212 23.2588 12.4208C23.2588 6.72167 18.6213 2.08301 12.921 2.08301M12.921 24.5087C6.2558 24.5087 0.83313 19.086 0.83313 12.4208C0.83313 5.75567 6.2558 0.333008 12.921 0.333008C19.5861 0.333008 25.0088 5.75567 25.0088 12.4208C25.0088 19.086 19.5861 24.5087 12.921 24.5087' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "},
|
||||||
|
{"name":"Map", "active":false, "url":"/map" , "image_url":"data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833496 8.80925C0.833496 4.29425 4.48516 0.642578 9.00016 0.642578C13.5152 0.642578 17.1668 4.29425 17.1668 8.80925C17.1668 13.6742 12.0102 20.3826 9.8985 22.9376C9.43183 23.4976 8.58016 23.4976 8.1135 22.9376C5.99016 20.3826 0.833496 13.6742 0.833496 8.80925ZM6.0835 8.80925C6.0835 10.4192 7.39016 11.7259 9.00016 11.7259C10.6102 11.7259 11.9168 10.4192 11.9168 8.80925C11.9168 7.19924 10.6102 5.89258 9.00016 5.89258C7.39016 5.89258 6.0835 7.19924 6.0835 8.80925Z' fill='%2361646B' /%3E%3C/svg%3E%0A"},
|
||||||
|
{"name":"Trips", "active":false, "url":"" , "image_url":"data:image/svg+xml,%3Csvg width='26' height='22' viewBox='0 0 26 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 5.53348C14.8832 5.53348 14.4912 5.14148 14.4912 4.65848V1.83398C14.4912 1.35098 14.8832 0.958984 15.3662 0.958984C15.8492 0.958984 16.2412 1.35098 16.2412 1.83398V4.65848C16.2412 5.14148 15.8492 5.53348 15.3662 5.53348Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 20.8318C14.8832 20.8318 14.4912 20.4398 14.4912 19.9568V17.5967C14.4912 17.1125 14.8832 16.7217 15.3662 16.7217C15.8492 16.7217 16.2412 17.1125 16.2412 17.5967V19.9568C16.2412 20.4398 15.8492 20.8318 15.3662 20.8318Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 14.4634C14.8832 14.4634 14.4912 14.0714 14.4912 13.5884V7.96387C14.4912 7.48087 14.8832 7.08887 15.3662 7.08887C15.8492 7.08887 16.2412 7.48087 16.2412 7.96387V13.5884C16.2412 14.0714 15.8492 14.4634 15.3662 14.4634Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_513' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.666626 0.666992H25.75V21.0833H0.666626V0.666992Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_513)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.41663 14.1467V16.4088C2.41663 18.0212 3.75013 19.3337 5.38929 19.3337H21.0273C22.6665 19.3337 24 18.0212 24 16.4088V14.1467C22.5405 13.7628 21.4601 12.4422 21.4601 10.8765C21.4601 9.30966 22.5393 7.99016 24 7.60633L23.9988 5.34183C23.9988 3.72949 22.6653 2.41699 21.0261 2.41699H5.39046C3.75129 2.41699 2.41779 3.72949 2.41779 5.34183L2.41663 7.69616C3.89479 8.05899 4.95646 9.32599 4.95646 10.8765C4.95646 12.4422 3.87613 13.7628 2.41663 14.1467ZM21.0273 21.0837H5.38929C2.78529 21.0837 0.666626 18.986 0.666626 16.4088V13.3848C0.666626 12.9018 1.05863 12.5098 1.54163 12.5098C2.45979 12.5098 3.20646 11.7772 3.20646 10.8765C3.20646 10.0015 2.49013 9.34116 1.54163 9.34116C1.30946 9.34116 1.08663 9.24899 0.923293 9.08449C0.758793 8.92116 0.666626 8.69716 0.666626 8.46616L0.667793 5.34183C0.667793 2.76466 2.78646 0.666992 5.39046 0.666992H21.0261C23.6301 0.666992 25.7488 2.76466 25.7488 5.34183L25.75 8.36816C25.75 8.59916 25.6578 8.82316 25.4933 8.98649C25.33 9.15099 25.1071 9.24316 24.875 9.24316C23.9568 9.24316 23.2101 9.97583 23.2101 10.8765C23.2101 11.7772 23.9568 12.5098 24.875 12.5098C25.358 12.5098 25.75 12.9018 25.75 13.3848V16.4088C25.75 18.986 23.6313 21.0837 21.0273 21.0837Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "},
|
||||||
|
{"name":"Profile", "active":false, "url":"" , "image_url":"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
{#each items as item}
|
||||||
|
<FooterItem active={item.active} name={item.name} url={item.url}>
|
||||||
|
{#if item.active}
|
||||||
|
<img style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={item.image_url}>
|
||||||
|
{:else}
|
||||||
|
<img src={item.image_url}>
|
||||||
|
{/if}
|
||||||
|
</FooterItem>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
width: calc(100%);
|
||||||
|
|
||||||
|
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
border-top: 1px solid #EFEFF0;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 15px 10px 25px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 320px){
|
||||||
|
.footer {
|
||||||
|
gap: 0px;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 10px 0 15px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -2,16 +2,16 @@
|
||||||
import { Marker } from '@beyonk/svelte-mapbox'
|
import { Marker } from '@beyonk/svelte-mapbox'
|
||||||
import { createEventDispatcher, getContext } from 'svelte'
|
import { createEventDispatcher, getContext } from 'svelte'
|
||||||
|
|
||||||
export let lat = null
|
export let lat = 0
|
||||||
export let lng = null
|
export let lng = 0
|
||||||
export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
|
export let round = (1 / 110.574 / 1000) * 12 //cca 12m nutno pozměnit!!!!!!!!!! tento komentář nemazat
|
||||||
console.log({ round, lat, lng })
|
console.log({ round, lat, lng })
|
||||||
export let user = { lat: 0, lng: 0 }
|
export let user = { lat: 0, lng: 0 }
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
const Mlat = [lat - round, lat + round]
|
let Mlat = [lat - round, lat + round]
|
||||||
const Mlng = [lng - round, lng + round]
|
let Mlng = [lng - round, lng + round]
|
||||||
|
|
||||||
$: isIn = user ? user.lat > Mlat[0] && user.lat < Mlat[1] && user.lng > Mlng[0] && user.lng < Mlng[1] : null
|
$: isIn = user ? user.lat > Mlat[0] && user.lat < Mlat[1] && user.lng > Mlng[0] && user.lng < Mlng[1] : null
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
import { Map, controls } from '@beyonk/svelte-mapbox'
|
import { Map, controls } from '@beyonk/svelte-mapbox'
|
||||||
import { createEventDispatcher } from 'svelte'
|
import { createEventDispatcher } from 'svelte'
|
||||||
|
import { loop_guard } from 'svelte/internal'
|
||||||
const { GeolocateControl } = controls
|
const { GeolocateControl } = controls
|
||||||
let mapComponent
|
let mapComponent
|
||||||
|
let geolocateControl
|
||||||
let className = ''
|
let className = ''
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
|
||||||
|
|
@ -12,6 +14,20 @@
|
||||||
|
|
||||||
export let radius = false
|
export let radius = false
|
||||||
export let center = { lng: 0, lat: 0 }
|
export let center = { lng: 0, lat: 0 }
|
||||||
|
export const geo = (e) => {
|
||||||
|
|
||||||
|
geolocateControl.dispatchEvent('geolocate')
|
||||||
|
if (navigator.geolocation) {
|
||||||
|
navigator.geolocation.getCurrentPosition((position)=>{
|
||||||
|
const { latitude, longitude } = position.coords
|
||||||
|
user = { lat: latitude, lng: longitude }
|
||||||
|
dispatch('move', user)
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert("Can't load your location!")
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={className} class:radius>
|
<div class={className} class:radius>
|
||||||
|
|
@ -23,17 +39,20 @@
|
||||||
on:ready={() => {
|
on:ready={() => {
|
||||||
mapComponent.resize()
|
mapComponent.resize()
|
||||||
mapComponent.setCenter([center.lng, center.lat], 14)
|
mapComponent.setCenter([center.lng, center.lat], 14)
|
||||||
|
|
||||||
}}
|
}}
|
||||||
zoom={14}
|
zoom={14}
|
||||||
>
|
>
|
||||||
<slot {user} />
|
<slot {user} />
|
||||||
<GeolocateControl
|
<GeolocateControl
|
||||||
on:geolocate={(e) => {
|
bind:this={geolocateControl}
|
||||||
const { latitude, longitude } = e.detail.coords
|
on:geolocate={(e) => {
|
||||||
user = { lat: latitude, lng: longitude }
|
console.log(e)
|
||||||
dispatch('move', user)
|
const { latitude, longitude } = e.detail.coords
|
||||||
}}
|
user = { lat: latitude, lng: longitude }
|
||||||
/>
|
dispatch('move', user)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Map>
|
</Map>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script>
|
||||||
|
import Category from "./Category.svelte"
|
||||||
|
import Headline from "./Headline.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="categories">
|
||||||
|
<Headline content="Feeling Adventurous?"></Headline>
|
||||||
|
<div class="options">
|
||||||
|
<Category text="Beach" imgLink="">
|
||||||
|
|
||||||
|
</Category>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.categories{
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 0 0 20px auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 370px){
|
||||||
|
.categories {
|
||||||
|
width: calc(100% - 12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories > .options{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: center;
|
||||||
|
max-height: 100px;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories > .options::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<script>
|
||||||
|
export let text = ""
|
||||||
|
export let imgLink = ""
|
||||||
|
</script>
|
||||||
|
<button>
|
||||||
|
<div>
|
||||||
|
{#if imgLink !== ""}
|
||||||
|
<img style="flex-grow: 1" src={imgLink}>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<h3>
|
||||||
|
{text}
|
||||||
|
</h3>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #61646B;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active, button:hover{
|
||||||
|
opacity: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > h3{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > div{
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
overflow: none;
|
||||||
|
background-color: #EFEFF0;
|
||||||
|
|
||||||
|
border-radius: 200px;
|
||||||
|
border: 2px solid #AFB1B6;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: stretch;
|
||||||
|
|
||||||
|
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-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 370px){
|
||||||
|
button {
|
||||||
|
gap: 2.5vw;
|
||||||
|
}
|
||||||
|
button > div {
|
||||||
|
width: 18vw;
|
||||||
|
height: 18vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
<script>
|
||||||
|
import CompartmentItem from "./Compartment_Item.svelte"
|
||||||
|
import Headline from "./Headline.svelte";
|
||||||
|
|
||||||
|
export let items = []
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<Headline content="Inspiration on your trip"></Headline>
|
||||||
|
|
||||||
|
<div class="options">
|
||||||
|
{#each items as item }
|
||||||
|
<CompartmentItem price={item.price} location={item.location} name={item.name} image={item.image}></CompartmentItem>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.section{
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 0 0 20px auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 370px){
|
||||||
|
.section {
|
||||||
|
width: calc(100% - 12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section > .options{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section > .options::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
<script>
|
||||||
|
export let price = "$0.00"
|
||||||
|
export let location = "Home"
|
||||||
|
export let name = "Kawa Ijen"
|
||||||
|
export let image = ""
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button>
|
||||||
|
<div class="image">
|
||||||
|
{#if image !== ""}
|
||||||
|
<img style="flex-grow: 1;" src={image}>
|
||||||
|
{/if}
|
||||||
|
<div class="bookmark">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<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"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_1402_894)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.56133 2.33301C3.862 2.33301 3 2.98767 3 4.28034V14.0963C3 14.159 3.036 14.193 3.066 14.2103C3.096 14.229 3.14333 14.2423 3.198 14.2117L7.45267 11.825C7.60467 11.7403 7.79067 11.7397 7.94333 11.8257L12.1613 14.2083C12.2167 14.2403 12.264 14.2257 12.294 14.2077C12.324 14.1897 12.3593 14.1557 12.3593 14.093V4.40234C12.3593 3.89101 12.3593 2.33301 9.80067 2.33301H5.56133ZM3.13267 15.231C2.936 15.231 2.73933 15.1783 2.56067 15.073C2.20933 14.8683 2 14.5023 2 14.0963V4.28034C2 2.40701 3.298 1.33301 5.56133 1.33301H9.80067C12.062 1.33301 13.3593 2.45234 13.3593 4.40234V14.093C13.3593 14.4997 13.15 14.8657 12.798 15.0703C12.4473 15.2757 12.0247 15.2797 11.67 15.0797L7.69667 12.835L3.68667 15.0843C3.51333 15.1817 3.32333 15.231 3.13267 15.231Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price">
|
||||||
|
{price}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{location}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button{
|
||||||
|
padding: 8px 8px 12px 8px;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
border: 1px solid #EFEFF0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover, button:active{
|
||||||
|
opacity: 70%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .image{
|
||||||
|
width: 240px;
|
||||||
|
height: 152px;
|
||||||
|
|
||||||
|
/* background */
|
||||||
|
|
||||||
|
background-color: #EFEFF0;
|
||||||
|
/* subtle-light */
|
||||||
|
|
||||||
|
border: 2px solid #AFB1B6;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1402_2000' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.000488281 0H19.9601V19.9498H0.000488281V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1402_2000)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65049 1.5C3.12949 1.5 1.50049 3.227 1.50049 5.899V14.051C1.50049 16.724 3.12949 18.45 5.65049 18.45H14.3005C16.8275 18.45 18.4605 16.724 18.4605 14.051V5.899C18.4605 3.227 16.8275 1.5 14.3005 1.5H5.65049ZM14.3005 19.95H5.65049C2.27049 19.95 0.000488281 17.579 0.000488281 14.051V5.899C0.000488281 2.371 2.27049 0 5.65049 0H14.3005C17.6855 0 19.9605 2.371 19.9605 5.899V14.051C19.9605 17.579 17.6855 19.95 14.3005 19.95Z' fill='%2361646B'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.28126 15.1799C3.09526 15.1799 2.91026 15.1119 2.76526 14.9739C2.46426 14.6899 2.45226 14.2139 2.73726 13.9149L4.26526 12.3019C5.07426 11.4429 6.43926 11.4009 7.30226 12.2109L8.26026 13.1829C8.52726 13.4529 8.96126 13.4579 9.22926 13.1939C9.33026 13.0749 11.5083 10.4299 11.5083 10.4299C11.9223 9.92789 12.5063 9.61789 13.1553 9.55389C13.8053 9.49689 14.4363 9.68589 14.9393 10.0989C14.9823 10.1339 15.0213 10.1679 17.2173 12.4229C17.5063 12.7189 17.5013 13.1939 17.2043 13.4829C16.9083 13.7739 16.4323 13.7649 16.1433 13.4689C16.1433 13.4689 14.0943 11.3659 13.9483 11.2239C13.7933 11.0969 13.5443 11.0229 13.2993 11.0469C13.0503 11.0719 12.8263 11.1909 12.6673 11.3839C10.3433 14.2029 10.3153 14.2299 10.2773 14.2669C9.41926 15.1089 8.03426 15.0949 7.19126 14.2349C7.19126 14.2349 6.26126 13.2909 6.24526 13.2719C6.01426 13.0579 5.60226 13.0719 5.35526 13.3329L3.82526 14.9459C3.67726 15.1019 3.47926 15.1799 3.28126 15.1799Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55769 6.12891C6.00469 6.12891 5.55469 6.57891 5.55469 7.13291C5.55469 7.68691 6.00469 8.13791 6.55869 8.13791C7.11269 8.13791 7.56369 7.68691 7.56369 7.13291C7.56369 6.57991 7.11269 6.12991 6.55769 6.12891ZM6.55869 9.63791C5.17769 9.63791 4.05469 8.51391 4.05469 7.13291C4.05469 5.75191 5.17769 4.62891 6.55869 4.62891C7.94069 4.62991 9.06369 5.75391 9.06369 7.13291C9.06369 8.51391 7.93969 9.63791 6.55869 9.63791Z' fill='%2361646B'/%3E%3C/svg%3E%0A");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 390px){
|
||||||
|
button > .image{
|
||||||
|
width: 61.5vw;
|
||||||
|
height: 39vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 330px){
|
||||||
|
button > .image{
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .image > .bookmark{
|
||||||
|
position: absolute;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
right: 12px;
|
||||||
|
top: 12px;
|
||||||
|
background: #4263EB;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .image > .price{
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 370px){
|
||||||
|
button > .image > .bookmark{
|
||||||
|
width: 8vw;
|
||||||
|
height: 8vw;
|
||||||
|
right: 3vw;
|
||||||
|
top: 3vw;
|
||||||
|
border-radius: 2vw;
|
||||||
|
}
|
||||||
|
button > .image > .price{
|
||||||
|
padding: 1.2vw 2vw 1.2vw 2vw;
|
||||||
|
height: 8vw;
|
||||||
|
left: 3vw;
|
||||||
|
bottom: 3vw;
|
||||||
|
border-radius: 2vw;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .info{
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .info > h3{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #19191B;
|
||||||
|
}
|
||||||
|
|
||||||
|
button > .info > div{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #61646B;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="discover">
|
||||||
|
<h2>
|
||||||
|
Dicoveries around
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<button>
|
||||||
|
Start your trips!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/*min 370px*/
|
||||||
|
.discover {
|
||||||
|
background-color: #110042;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
width: calc(100% - 48px);
|
||||||
|
height: 124px;
|
||||||
|
|
||||||
|
border-radius: 32px;
|
||||||
|
|
||||||
|
margin: 0px auto 0px auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discover > h2{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.discover > button{
|
||||||
|
text-align: center;
|
||||||
|
color: #110042;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 8px 55px 8px 55px;
|
||||||
|
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discover > button:hover, .discover > button:active{
|
||||||
|
opacity: 80%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 370px){
|
||||||
|
.discover {
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
height: 33.5vw;
|
||||||
|
border-radius: 8vw;
|
||||||
|
}
|
||||||
|
.discover > button{
|
||||||
|
font-size: 4.3vw;
|
||||||
|
line-height: 5.4vw;
|
||||||
|
padding: 2.2vw 14.8vw 2.2vw 14.8vw;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.discover > h2{
|
||||||
|
font-size: 6.4vw;
|
||||||
|
line-height: 8.6vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<script>
|
||||||
|
export let content = ""
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
{content}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 370px)
|
||||||
|
{
|
||||||
|
h1 {
|
||||||
|
font-size: 6.4vw;
|
||||||
|
line-height: 8.6vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 300px)
|
||||||
|
{
|
||||||
|
h1 {
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<script>
|
||||||
|
export let headline = "Paris, Les Invalides"
|
||||||
|
</script>
|
||||||
|
<div class="top">
|
||||||
|
<button>
|
||||||
|
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z" fill="#4263EB"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<h1>
|
||||||
|
{headline}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<button>
|
||||||
|
<svg viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.2319 37.3851H41.2728L52.2261 48.3901C53.2853 49.4492 53.2853 51.1801 52.2261 52.2392C51.1669 53.2984 49.4361 53.2984 48.3769 52.2392L37.3978 41.2601V39.2192L36.7003 38.4959C33.0836 41.5959 28.1494 43.1976 22.9053 42.3192C15.7236 41.1051 9.98861 35.1117 9.11027 27.8784C7.76694 16.9509 16.9636 7.75425 27.8911 9.09758C35.1244 9.97591 41.1178 15.7109 42.3319 22.8926C43.2103 28.1367 41.6086 33.0709 38.5086 36.6876L39.2319 37.3851ZM14.1478 25.7601C14.1478 32.1926 19.3403 37.3851 25.7728 37.3851C32.2053 37.3851 37.3978 32.1926 37.3978 25.7601C37.3978 19.3276 32.2053 14.1351 25.7728 14.1351C19.3403 14.1351 14.1478 19.3276 14.1478 25.7601Z" fill="#4263EB"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button:hover, button:active{
|
||||||
|
opacity: 70%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: calc(100% - 48px);
|
||||||
|
height: 62px;
|
||||||
|
|
||||||
|
margin: 30px auto 20px auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top h1{
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top > button{
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top > button > svg{
|
||||||
|
height: 90%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 370px){
|
||||||
|
.top {
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 440px){
|
||||||
|
.top{
|
||||||
|
height: 14vw;
|
||||||
|
}
|
||||||
|
.top h1{
|
||||||
|
font-size: 5.5vw;
|
||||||
|
line-height: 6.8vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 310px){
|
||||||
|
.top{
|
||||||
|
height: 14vw;
|
||||||
|
}
|
||||||
|
.top h1{
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,6 +7,9 @@
|
||||||
@import url("normalize.scss");
|
@import url("normalize.scss");
|
||||||
@import url("fonts.scss");
|
@import url("fonts.scss");
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,69 @@
|
||||||
<script>
|
<script>
|
||||||
import Heading from '../lib/Components/Game/Heading.svelte'
|
import Discover from '../lib/Components/index/Discover.svelte';
|
||||||
import Overlay from '../lib/Components/Overlay.svelte'
|
import Top from '../lib/Components/index/Top.svelte';
|
||||||
import Section from '../lib/Components/Section.svelte'
|
import NavigationBar from '../lib/Components/NavigationBar.svelte';
|
||||||
|
import Categories from '../lib/Components/index/Categories.svelte'
|
||||||
|
import Comparment from '../lib/Components/index/Comparment.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Overlay img="/assets/images/main.jpg">
|
|
||||||
<Heading>
|
|
||||||
<span>Erant</span>
|
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<Section title="Spuštění hry">
|
|
||||||
<p>Pro spuštění zážitku najděte QR kód.</p>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section>
|
<div class="content">
|
||||||
<p>Nechť dobrodružství započne.</p>
|
<Top>
|
||||||
</Section>
|
</Top>
|
||||||
</Overlay>
|
|
||||||
|
<Discover>
|
||||||
|
</Discover>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="line">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Categories>
|
||||||
|
</Categories>
|
||||||
|
|
||||||
|
<Comparment items={[{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown", "image":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"},{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown", "image":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"},{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown", "image":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"},{"price":"$10.00", "location":"Prag, Czech Republic", "name":"Hometown"}]}>
|
||||||
|
</Comparment>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<NavigationBar>
|
||||||
|
|
||||||
|
</NavigationBar>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
height: calc(100% - 94px);
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 94px;
|
||||||
|
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.content::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line{
|
||||||
|
width: calc(100% - 48px);
|
||||||
|
height: 1px;
|
||||||
|
background-color: #EFEFF0;
|
||||||
|
margin: 20px auto 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 370px){
|
||||||
|
.line {
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin: 5.4vw auto 5.4vw auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<script>
|
||||||
|
import Map from "../lib/Components/Game/Map/Map.svelte"
|
||||||
|
import NavigationBar from "../lib/Components/NavigationBar.svelte"
|
||||||
|
|
||||||
|
let lat = null;
|
||||||
|
let lng = null;
|
||||||
|
|
||||||
|
if (navigator.geolocation) {
|
||||||
|
navigator.geolocation.getCurrentPosition(showPosition);
|
||||||
|
} else {
|
||||||
|
alert("Can't load your location!")
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPosition(position) {
|
||||||
|
lat = position.coords.latitude;
|
||||||
|
lng = position.coords.longitude;
|
||||||
|
}
|
||||||
|
|
||||||
|
let geolocate;
|
||||||
|
|
||||||
|
function onClick(e) {
|
||||||
|
console.log("now")
|
||||||
|
geolocate(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
let navBarItems = [{"name":"Home", "active":false, "url":"/" , "image_url": "data:image/svg+xml,%3Csvg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1572 22.2352V18.6679C8.1572 17.7573 8.90083 17.019 9.81813 17.019H13.1713C13.6118 17.019 14.0343 17.1928 14.3458 17.502C14.6573 17.8112 14.8323 18.2306 14.8323 18.6679V22.2352C14.8295 22.6138 14.979 22.9779 15.2477 23.2465C15.5164 23.5152 15.882 23.6663 16.2634 23.6663H18.5511C19.6195 23.6691 20.6452 23.2497 21.4017 22.5006C22.1581 21.7516 22.5833 20.7345 22.5833 19.6738V9.51101C22.5833 8.65421 22.2007 7.84149 21.5387 7.29179L13.7563 1.12152C12.4026 0.0396631 10.4629 0.0745936 9.14958 1.20448L1.54481 7.29179C0.85149 7.82529 0.437104 8.64042 0.416626 9.51101V19.6634C0.416626 21.8742 2.2219 23.6663 4.44883 23.6663H6.6843C7.47639 23.6663 8.12012 23.0319 8.12586 22.2456L8.1572 22.2352Z' fill='%2361646B'/%3E%3C/svg%3E%0A"},
|
||||||
|
{"name":"Explore", "active":false, "image_url":"data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.58 11.0798L10.3585 14.9846L14.2622 13.7619L15.4848 9.85711L11.58 11.0798ZM9.02384 17.1931C8.79517 17.1931 8.57117 17.1033 8.40434 16.9376C8.17451 16.7066 8.09051 16.3671 8.18851 16.0579L10.047 10.1208C10.1322 9.84545 10.3468 9.63195 10.6198 9.54678L16.557 7.68828C16.8685 7.58911 17.2068 7.67428 17.4378 7.90411C17.6677 8.13511 17.7517 8.47461 17.6537 8.78378L15.7963 14.7209C15.7112 14.9951 15.4953 15.2098 15.2223 15.2949L9.28517 17.1534C9.19884 17.1803 9.11017 17.1931 9.02384 17.1931Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_2517' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='25'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833374 0.333008H25.0088V24.5083H0.833374V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2517)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.921 2.08301C7.22063 2.08301 2.58313 6.72167 2.58313 12.4208C2.58313 18.1212 7.22063 22.7587 12.921 22.7587C18.6213 22.7587 23.2588 18.1212 23.2588 12.4208C23.2588 6.72167 18.6213 2.08301 12.921 2.08301M12.921 24.5087C6.2558 24.5087 0.83313 19.086 0.83313 12.4208C0.83313 5.75567 6.2558 0.333008 12.921 0.333008C19.5861 0.333008 25.0088 5.75567 25.0088 12.4208C25.0088 19.086 19.5861 24.5087 12.921 24.5087' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "},
|
||||||
|
{"name":"Map", "active":true,"url":"/map", "image_url":"data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.833496 8.80925C0.833496 4.29425 4.48516 0.642578 9.00016 0.642578C13.5152 0.642578 17.1668 4.29425 17.1668 8.80925C17.1668 13.6742 12.0102 20.3826 9.8985 22.9376C9.43183 23.4976 8.58016 23.4976 8.1135 22.9376C5.99016 20.3826 0.833496 13.6742 0.833496 8.80925ZM6.0835 8.80925C6.0835 10.4192 7.39016 11.7259 9.00016 11.7259C10.6102 11.7259 11.9168 10.4192 11.9168 8.80925C11.9168 7.19924 10.6102 5.89258 9.00016 5.89258C7.39016 5.89258 6.0835 7.19924 6.0835 8.80925Z' fill='%2361646B' /%3E%3C/svg%3E%0A"},
|
||||||
|
{"name":"Trips", "active":false, "image_url":"data:image/svg+xml,%3Csvg width='26' height='22' viewBox='0 0 26 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 5.53348C14.8832 5.53348 14.4912 5.14148 14.4912 4.65848V1.83398C14.4912 1.35098 14.8832 0.958984 15.3662 0.958984C15.8492 0.958984 16.2412 1.35098 16.2412 1.83398V4.65848C16.2412 5.14148 15.8492 5.53348 15.3662 5.53348Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 20.8318C14.8832 20.8318 14.4912 20.4398 14.4912 19.9568V17.5967C14.4912 17.1125 14.8832 16.7217 15.3662 16.7217C15.8492 16.7217 16.2412 17.1125 16.2412 17.5967V19.9568C16.2412 20.4398 15.8492 20.8318 15.3662 20.8318Z' fill='%2361646B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3662 14.4634C14.8832 14.4634 14.4912 14.0714 14.4912 13.5884V7.96387C14.4912 7.48087 14.8832 7.08887 15.3662 7.08887C15.8492 7.08887 16.2412 7.48087 16.2412 7.96387V13.5884C16.2412 14.0714 15.8492 14.4634 15.3662 14.4634Z' fill='%2361646B'/%3E%3Cmask id='mask0_1515_513' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.666626 0.666992H25.75V21.0833H0.666626V0.666992Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_513)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.41663 14.1467V16.4088C2.41663 18.0212 3.75013 19.3337 5.38929 19.3337H21.0273C22.6665 19.3337 24 18.0212 24 16.4088V14.1467C22.5405 13.7628 21.4601 12.4422 21.4601 10.8765C21.4601 9.30966 22.5393 7.99016 24 7.60633L23.9988 5.34183C23.9988 3.72949 22.6653 2.41699 21.0261 2.41699H5.39046C3.75129 2.41699 2.41779 3.72949 2.41779 5.34183L2.41663 7.69616C3.89479 8.05899 4.95646 9.32599 4.95646 10.8765C4.95646 12.4422 3.87613 13.7628 2.41663 14.1467ZM21.0273 21.0837H5.38929C2.78529 21.0837 0.666626 18.986 0.666626 16.4088V13.3848C0.666626 12.9018 1.05863 12.5098 1.54163 12.5098C2.45979 12.5098 3.20646 11.7772 3.20646 10.8765C3.20646 10.0015 2.49013 9.34116 1.54163 9.34116C1.30946 9.34116 1.08663 9.24899 0.923293 9.08449C0.758793 8.92116 0.666626 8.69716 0.666626 8.46616L0.667793 5.34183C0.667793 2.76466 2.78646 0.666992 5.39046 0.666992H21.0261C23.6301 0.666992 25.7488 2.76466 25.7488 5.34183L25.75 8.36816C25.75 8.59916 25.6578 8.82316 25.4933 8.98649C25.33 9.15099 25.1071 9.24316 24.875 9.24316C23.9568 9.24316 23.2101 9.97583 23.2101 10.8765C23.2101 11.7772 23.9568 12.5098 24.875 12.5098C25.358 12.5098 25.75 12.9018 25.75 13.3848V16.4088C25.75 18.986 23.6313 21.0837 21.0273 21.0837Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "},
|
||||||
|
{"name":"Profile", "active":false, "image_url":"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E "}
|
||||||
|
];
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<Map center={{ lat, lng }} class="w-full h-full" on:move={console.log} let:user bind:geo={geolocate}>
|
||||||
|
</Map>
|
||||||
|
|
||||||
|
<div class="on">
|
||||||
|
<button>
|
||||||
|
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z" fill="#4263EB"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button on:click={(e)=>{onClick(e)}}>
|
||||||
|
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.758179 14.1551C0.758179 6.53234 6.92333 0.367188 14.5461 0.367188C22.1688 0.367188 28.3339 6.53234 28.3339 14.1551C28.3339 22.3687 19.6279 33.6945 16.0627 38.0081C15.2748 38.9536 13.837 38.9536 13.0491 38.0081C9.46424 33.6945 0.758179 22.3687 0.758179 14.1551ZM9.62182 14.1551C9.62182 16.8733 11.8279 19.0793 14.5461 19.0793C17.2642 19.0793 19.4703 16.8733 19.4703 14.1551C19.4703 11.4369 17.2642 9.23083 14.5461 9.23083C11.8279 9.23083 9.62182 11.4369 9.62182 14.1551Z" fill="#4263EB"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<NavigationBar items={navBarItems}>
|
||||||
|
</NavigationBar>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.on{
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 27px;
|
||||||
|
right: 23px;;
|
||||||
|
bottom: 140px;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 25px;
|
||||||
|
position: relative;
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover, button:active{
|
||||||
|
opacity: 70%;
|
||||||
|
}
|
||||||
|
button > svg{
|
||||||
|
height: 56%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
<script>
|
||||||
|
// 420 px
|
||||||
|
export var images = [{"color":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"}, {"color":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"}, {"color":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"}, {"color":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"}, {"color":"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"}]
|
||||||
|
|
||||||
|
let default_index = 3
|
||||||
|
|
||||||
|
let scrollProgress = 0
|
||||||
|
|
||||||
|
let width = 320
|
||||||
|
let height = 160
|
||||||
|
|
||||||
|
let func = 0.1
|
||||||
|
|
||||||
|
let margin = 0
|
||||||
|
|
||||||
|
let mp = [-3, -2, -1]
|
||||||
|
let nav = []
|
||||||
|
|
||||||
|
for (let i = 0; i < images.length + 3; i++)
|
||||||
|
{
|
||||||
|
mp.push(mp.at(-1) + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < images.length ; i++)
|
||||||
|
{
|
||||||
|
if (i === 0){
|
||||||
|
nav.push({"status":"active"})
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
nav.push({"status":"wait"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let carousel
|
||||||
|
|
||||||
|
const scroll = (self) => {
|
||||||
|
scrollProgress = -(self.querySelector(".scroll-guide").getBoundingClientRect().x - self.querySelector(".sticky").getBoundingClientRect().width -self.getBoundingClientRect().x)/(width)
|
||||||
|
|
||||||
|
}
|
||||||
|
function getWidth(x){
|
||||||
|
var res = width - width*0.3*Math.abs(x)
|
||||||
|
if (res > 0){return res}
|
||||||
|
else{return 0}
|
||||||
|
}
|
||||||
|
function getMargin(x){
|
||||||
|
var m = 1000
|
||||||
|
|
||||||
|
if (x<=-1.75){
|
||||||
|
x = -(1.75+(x+1.75))
|
||||||
|
if (x>=0){
|
||||||
|
x=0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (x>=1.75){
|
||||||
|
x = 1.75-(x-1.75)
|
||||||
|
if (x<=0){
|
||||||
|
x=0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x > 0){
|
||||||
|
x = Math.abs(x)
|
||||||
|
return "margin-left: -"+ m*func*x +"px"
|
||||||
|
}
|
||||||
|
else if (x === 0){return "margin: 0px;"}
|
||||||
|
else{
|
||||||
|
x = Math.abs(x)
|
||||||
|
return "margin-right: -" + m*func*x +"px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id=carousel bind:this={carousel} on:scroll={scroll(carousel)} style="min-height: {height+100}px;">
|
||||||
|
<div class="sticky" style="min-height: {height+100}px;">
|
||||||
|
{#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: {(mp.at(index)-scrollProgress<-0.5 && mp.at(index)-scrollProgress>=-1.5)||(mp.at(index)-scrollProgress>=0.5 && mp.at(index)-scrollProgress<=1.5)? 1:((mp.at(index)-scrollProgress>-0.5 && mp.at(index)-scrollProgress<=0.5)?2:0)};
|
||||||
|
{getMargin(mp.at(index)-scrollProgress)};">
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each images as image, index (index)}
|
||||||
|
<div class="item real" style="text-align:center;
|
||||||
|
display: {mp.at(index+default_index)-scrollProgress<=-3.5||mp.at(index+default_index)-scrollProgress>3.5 ? "none" : "block"};
|
||||||
|
min-width: {getWidth(mp.at(index+default_index)-scrollProgress)}px;
|
||||||
|
max-width: {getWidth(mp.at(index+default_index)-scrollProgress)}px;
|
||||||
|
min-height: {height + height*(-func*(mp.at(index+default_index)-scrollProgress)*(mp.at(index+default_index)-scrollProgress))}px;
|
||||||
|
z-index: {(mp.at(index+default_index)-scrollProgress<-0.5 && mp.at(index+default_index)-scrollProgress>-1.5)||(mp.at(index+default_index)-scrollProgress>=0.5 && mp.at(index+default_index)-scrollProgress<=1.5)? 1:((mp.at(index+default_index)-scrollProgress>-0.5 && mp.at(index+default_index)-scrollProgress<=0.5)?2:0)};
|
||||||
|
{getMargin(mp.at(index+default_index)-scrollProgress)}">
|
||||||
|
<img src={image.color}>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each Array(3) as _, index (index)}
|
||||||
|
<div class="item fake" style="
|
||||||
|
display: {mp.at(-default_index+index)-scrollProgress<=-3.5||mp.at(-default_index+index)-scrollProgress>3.5 ? "none" : "block"};
|
||||||
|
min-width: {getWidth(mp.at(-default_index+index)-scrollProgress)}px;
|
||||||
|
max-width: {getWidth(mp.at(-default_index+index)-scrollProgress)}px;
|
||||||
|
min-height: {height + height*(-func*(mp.at(-default_index+index)-scrollProgress)*(mp.at(-default_index+index)-scrollProgress))}px;
|
||||||
|
z-index: {(mp.at(-default_index+index)-scrollProgress<-0.5 && mp.at(-default_index+index)-scrollProgress>=-1.5)||(mp.at(-default_index+index)-scrollProgress>=0.5 && mp.at(-default_index+index)-scrollProgress<=1.5)? 1:((mp.at(-default_index+index)-scrollProgress>-0.5 && mp.at(-default_index+index)-scrollProgress<=0.5)?2:0)};
|
||||||
|
{getMargin(mp.at(-default_index+index)-scrollProgress)}">
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<div class="overlay">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-guide" style="min-width: {(width)*5-width}px; min-height: 10px;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide-navigation">
|
||||||
|
<span class="active"></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#carousel{
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: fit-content;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carousel > .sticky{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
position: sticky;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
gap: 0px;
|
||||||
|
|
||||||
|
min-width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carousel > .sticky > .item{
|
||||||
|
border-radius: 10px;
|
||||||
|
min-width: 0;
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carousel > .sticky > .overlay{
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* 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%);
|
||||||
|
transform: matrix(1, 0, 0, -1, 0, 0);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carousel > .sticky > .real{
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: stretch;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#carousel > .sticky > .real > img{
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carousel > .sticky > .fake {
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-navigation{
|
||||||
|
height: fit-content;
|
||||||
|
display: none;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
.slide-navigation > span{
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-navigation > .active{
|
||||||
|
background-color: #7B61FF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue