male zmeny
This commit is contained in:
parent
d0fa7743c4
commit
95d1681053
File diff suppressed because it is too large
Load Diff
|
@ -10,12 +10,13 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
||||||
"autoprefixer": "^10.4.7",
|
"autoprefixer": "^10.4.8",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.16",
|
||||||
"postcss-load-config": "^4.0.1",
|
"postcss-load-config": "^4.0.1",
|
||||||
"sass": "^1.53.0",
|
"sass": "^1.53.0",
|
||||||
"svelte": "^3.49.0",
|
"svelte": "^3.49.0",
|
||||||
"svelte-preprocess": "^4.10.7",
|
"svelte-preprocess": "^4.10.7",
|
||||||
|
"tailwindcss": "^3.1.8",
|
||||||
"vite": "^3.0.0"
|
"vite": "^3.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -3,12 +3,16 @@
|
||||||
import './main.scss'
|
import './main.scss'
|
||||||
|
|
||||||
import Game from './routes/game.svelte'
|
import Game from './routes/game.svelte'
|
||||||
|
import Quiz from './routes/quiz.svelte'
|
||||||
import Try from './routes/try.svelte'
|
import Try from './routes/try.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<Router>
|
<Router>
|
||||||
<Route path="/">
|
<Route path="/">
|
||||||
|
<Quiz />
|
||||||
|
</Route>
|
||||||
|
<Route path="/game">
|
||||||
<Try />
|
<Try />
|
||||||
</Route>
|
</Route>
|
||||||
</Router>
|
</Router>
|
||||||
|
@ -19,6 +23,9 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
justify-self: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 768px;
|
||||||
|
/*overflow: hidden;*/
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
|
@ -1,8 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { navigate } from 'svelte-routing'
|
||||||
|
|
||||||
export let primary = false
|
export let primary = false
|
||||||
|
export let style = ''
|
||||||
|
export let href = ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button on:click class:primary>
|
<button {style} on:click={() => navigate(href)} on:click class:primary>
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
@ -24,6 +28,9 @@
|
||||||
background-color: rgb(232, 232, 232);
|
background-color: rgb(232, 232, 232);
|
||||||
color: #4263eb;
|
color: #4263eb;
|
||||||
|
|
||||||
|
word-break: break-word;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
color: #110042;
|
color: #110042;
|
||||||
background-color: rgba(150, 221, 255);
|
background-color: rgba(150, 221, 255);
|
Before Width: | Height: | Size: 641 B After Width: | Height: | Size: 641 B |
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 527 B After Width: | Height: | Size: 527 B |
|
@ -0,0 +1,11 @@
|
||||||
|
<div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
/*border: 1px solid grey;*/
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
export let style = ''
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: var(--quizHeader);
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<slot />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script>
|
||||||
|
export let style = ''
|
||||||
|
export let checked = false
|
||||||
|
export let size = '50px'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div style="{style}; height: {size}">
|
||||||
|
<input style="width:{size}" bind:checked type="checkbox" on:input />
|
||||||
|
<span><slot /></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
div {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 4px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 140%;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
border: 4px solid var(--blue);
|
||||||
|
box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script>
|
||||||
|
export let style = ''
|
||||||
|
export let value, type
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if type === 'text'}
|
||||||
|
<input {style} bind:value type="text" />
|
||||||
|
{:else if type === 'number'}
|
||||||
|
<input {style} bind:value type="number" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
input {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: white;
|
||||||
|
border: 4px solid var(--blue);
|
||||||
|
box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,56 @@
|
||||||
|
<script>
|
||||||
|
import IconShare from './Icons/Share.svelte'
|
||||||
|
export let shareData
|
||||||
|
|
||||||
|
const share = async () => {
|
||||||
|
if (navigator.canShare(shareData)) {
|
||||||
|
await navigator.share(shareData)
|
||||||
|
} else {
|
||||||
|
navigator.clipboard.writeText(shareData.url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={share}>
|
||||||
|
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g filter="url(#filter0_i_956_444)">
|
||||||
|
<rect width="42" height="42" fill="url(#share_svelteSvgPictureid)" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_i_956_444" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="436" dy="4" />
|
||||||
|
<feGaussianBlur stdDeviation="2" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.388235 0 0 0 0 0.921569 0 0 0 1 0" />
|
||||||
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_956_444" />
|
||||||
|
</filter>
|
||||||
|
<pattern id="share_svelteSvgPictureid" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||||
|
<use xlink:href="#image0_956_444" transform="scale(0.00520833)" />
|
||||||
|
</pattern>
|
||||||
|
<image
|
||||||
|
id="image0_956_444"
|
||||||
|
width="192"
|
||||||
|
height="192"
|
||||||
|
xlink:href="data:image/png;base64,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"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #e8e8e8;
|
||||||
|
border-radius: 16px;
|
||||||
|
z-index: 6;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import Sharebutton from './Sharebutton.svelte'
|
import Sharebutton from '../Sharebutton.svelte'
|
||||||
export let shareData
|
export let shareData
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@
|
||||||
<Sharebutton {shareData} />
|
<Sharebutton {shareData} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style lang="scss">
|
||||||
div {
|
div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 75%);
|
height: calc(100% - 75%);
|
||||||
|
@ -18,5 +18,12 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
background: none;
|
background: none;
|
||||||
|
position: fixed;
|
||||||
|
clip-path: inset(0);
|
||||||
|
z-index: 6;
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,36 +1,38 @@
|
||||||
<script>
|
<script>
|
||||||
export let img
|
export let img
|
||||||
export let shareData
|
export let shareData = null
|
||||||
export let alt = 'background image'
|
export let alt = 'background image'
|
||||||
import Tab from './Ota/Tab.svelte'
|
import Tab from './MyComponents/game/Tab.svelte'
|
||||||
|
import Layout from './MyComponents/Layout.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="container">
|
<Layout>
|
||||||
<img src={img} {alt} />
|
<section class="container">
|
||||||
<Tab {shareData} />
|
<img src={img} {alt} />
|
||||||
<section class="overlay">
|
{#if shareData !== null && shareData !== false}
|
||||||
<slot />
|
<Tab {shareData} />
|
||||||
|
{/if}
|
||||||
|
<section class="overlay">
|
||||||
|
<slot />
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</Layout>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 768px;
|
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
height: 75vh;
|
min-height: 75vh;
|
||||||
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 25%;
|
top: 25%;
|
||||||
border-radius: 70px 70px 0 0;
|
border-radius: 70px 70px 0 0;
|
||||||
/*padding-left: 52px;
|
padding: 52px;
|
||||||
padding-right: 52px;
|
|
||||||
padding-top: 52px;*/
|
|
||||||
padding: 52px; /*provedena změna-OtaProkopec*/
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
row-gap: 35px;
|
row-gap: 35px;
|
||||||
|
@ -44,6 +46,11 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 25%;
|
min-height: 25%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,9 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
export let title
|
export let style = ''
|
||||||
|
export let title = ''
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section>
|
<section {style}>
|
||||||
<h2>{title}</h2>
|
<h2><slot name="title">{title}</slot></h2>
|
||||||
<div><slot /></div>
|
<div><slot /></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
@ -22,7 +23,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
color: rgba(0, 0, 0, 0.4);
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
|
@ -1,30 +0,0 @@
|
||||||
<script>
|
|
||||||
import IconShare from './Icons/Share.svelte'
|
|
||||||
export let shareData
|
|
||||||
|
|
||||||
const share = async () => {
|
|
||||||
if (navigator.canShare(shareData)) {
|
|
||||||
await navigator.share(shareData)
|
|
||||||
} else {
|
|
||||||
navigator.clipboard.writeText(shareData.url)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div on:click={share}>
|
|
||||||
<IconShare />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
height: 62px;
|
|
||||||
width: 62px;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #e8e8e8;
|
|
||||||
border-radius: 16px;
|
|
||||||
z-index: 6;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,7 +1,8 @@
|
||||||
|
import './app.css'
|
||||||
import App from './App.svelte'
|
import App from './App.svelte'
|
||||||
|
|
||||||
const app = new App({
|
const app = new App({
|
||||||
target: document.getElementById('app')
|
target: document.getElementById('app'),
|
||||||
})
|
})
|
||||||
|
|
||||||
export default app
|
export default app
|
||||||
|
|
|
@ -16,6 +16,8 @@ body {
|
||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
@ -28,4 +30,17 @@ p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--quizHeader: 300px;
|
||||||
|
--fontSize: 40px;
|
||||||
|
--blue: rgba(150, 221, 255);
|
||||||
|
--border-radius: 25px;
|
||||||
|
--grey: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@import url("normalize.scss")
|
@import url("normalize.scss")
|
||||||
|
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
<script>
|
<script>
|
||||||
import Heading from '../lib/Ota/Heading.svelte'
|
import Heading from '../lib/Components/MyComponents/game/Heading.svelte'
|
||||||
import Overlay from '../lib/Overlay.svelte'
|
import Overlay from '../lib/Components/Overlay.svelte'
|
||||||
import Section from '../lib/Section.svelte'
|
import Section from '../lib/Components/Section.svelte'
|
||||||
import Button from '../lib/Button.svelte'
|
import Button from '../lib/Components/Button.svelte'
|
||||||
import Bubble from '../lib/Ota/Bubble.svelte'
|
import Bubble from '../lib/Components/MyComponents/game/Bubble.svelte'
|
||||||
import IconStar from '../lib/Ota/Icons/Star.svelte'
|
import IconStar from '../lib/Components/MyComponents/Icons/Star.svelte'
|
||||||
import IconPoint from '../lib/Ota/Icons/Point.svelte'
|
import IconPoint from '../lib/Components/MyComponents/Icons/Point.svelte'
|
||||||
import Map from '../lib/Ota/Map.svelte'
|
import Map from '../lib/Components/MyComponents/game/Map.svelte'
|
||||||
import ImageSlider from '../lib/Ota/ImageSlider.svelte'
|
import ImageSlider from '../lib/Components/MyComponents/ImageSlider.svelte'
|
||||||
|
|
||||||
export let backgound
|
export let background
|
||||||
export let assets
|
export let assets
|
||||||
export let shareData
|
export let shareData
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Overlay {shareData} img={backgound}>
|
<Overlay {shareData} img={background}>
|
||||||
<Heading>
|
<Heading>
|
||||||
<slot name="title" />
|
<slot name="title" />
|
||||||
<div class="bubbles" slot="bubbles">
|
<div class="bubbles" slot="bubbles">
|
||||||
|
|
|
@ -0,0 +1,83 @@
|
||||||
|
<script>
|
||||||
|
import Heading from '../lib/Components/MyComponents/Quiz/Heading.svelte'
|
||||||
|
import Layout from '../lib/Components/MyComponents/Layout.svelte'
|
||||||
|
import Section from '../lib/Components/Section.svelte'
|
||||||
|
import Map from '../lib/Components/MyComponents/game/Map.svelte'
|
||||||
|
import Button from '../lib/Components/Button.svelte'
|
||||||
|
import Input from '../lib/Components/MyComponents/Quiz/answers/Input.svelte'
|
||||||
|
import CheckBox from '../lib/Components/MyComponents/Quiz/answers/Checkbox.svelte'
|
||||||
|
|
||||||
|
const popis = 'tohel dklfsdja fdsaj jklfdas fsadj lkjdfsa kl dsajfklasj asdlfkjaslk fasdklfj l'
|
||||||
|
const title = 'Nadpis úkolu'
|
||||||
|
|
||||||
|
let myAnswer = []
|
||||||
|
$: console.log(myAnswer, myAnswer[0])
|
||||||
|
const option = {
|
||||||
|
withButton: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
let answers = [
|
||||||
|
{ label: '1 answer', checked: false },
|
||||||
|
{ label: '1 answer', checked: false },
|
||||||
|
{ label: '1 answer', checked: false },
|
||||||
|
{ label: '1 answer', checked: false },
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<div class="wrap">
|
||||||
|
<Heading style="height: var(--quizHeader); position: relative; top: 0">
|
||||||
|
<div class="flex justify-center item-center flex-wrap gap-3">
|
||||||
|
<span class="title">{title}</span>
|
||||||
|
<span style="width: 85%"><Map /></span>
|
||||||
|
</div>
|
||||||
|
</Heading>
|
||||||
|
<Section style={'height: calc(100% - var(--quizHeader)); position: relative'}>
|
||||||
|
<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
|
||||||
|
<div class="popis">
|
||||||
|
<span> Popis úkolu: </span>
|
||||||
|
<span>{popis}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center flex-col w-full gap-6">
|
||||||
|
<!--<Input bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
|
||||||
|
<Button on:click={() => (myAnswer = i)} primary={true} style="min-width:400px;width:auto;max-width:750px;height:auto; max-height: 200px">{answer}</Button>
|
||||||
|
<Input type="number" bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
|
||||||
|
-->
|
||||||
|
{#each answers as { label, checked }, i}
|
||||||
|
<CheckBox bind:checked>{label}</CheckBox>
|
||||||
|
{/each}
|
||||||
|
{#if option.withButton}
|
||||||
|
<Button primary={true} style="width: 225px; height: 60px">commit</Button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.wrap {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: var(--fontSize);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popis {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: var(--grey);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -9,7 +9,7 @@
|
||||||
let background = '/assets/temp/kar1.png'
|
let background = '/assets/temp/kar1.png'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Overlay {shareData} {assets} backgound={background}>
|
<Overlay {shareData} {assets} {background}>
|
||||||
<span slot="title">Tůra po Karláku</span>
|
<span slot="title">Tůra po Karláku</span>
|
||||||
<span slot="description">Vydejte se na napínavou pouť po zajímavostech největšího náměstí v Česku.</span>
|
<span slot="description">Vydejte se na napínavou pouť po zajímavostech největšího náměstí v Česku.</span>
|
||||||
<span slot="stars">4.5</span>
|
<span slot="stars">4.5</span>
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./index.html', './src/**/*.{html,svelte,js,ts}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
|
@ -1,20 +1,26 @@
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||||
import sveltePreprocess from 'svelte-preprocess'
|
import sveltePreprocess from 'svelte-preprocess'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
$lib: path.resolve(__dirname, 'src', 'lib'),
|
||||||
|
},
|
||||||
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
svelte({
|
svelte({
|
||||||
preprocess: sveltePreprocess({
|
preprocess: sveltePreprocess({
|
||||||
scss: true,
|
scss: true,
|
||||||
postcss: true
|
postcss: true,
|
||||||
})
|
}),
|
||||||
})
|
}),
|
||||||
],
|
],
|
||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
output: { entryFileNames: "assets/[name].js" }
|
output: { entryFileNames: 'assets/[name].js' },
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue