male zmeny

package.json

@@ -10,12 +10,13 @@
 	},
 	"devDependencies": {
 		"@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",
 		"sass": "^1.53.0",
 		"svelte": "^3.49.0",
 		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.8",
 		"vite": "^3.0.0"
 	},
 	"dependencies": {

src/App.svelte

@@ -3,12 +3,16 @@
 	import './main.scss'
 
 	import Game from './routes/game.svelte'
+	import Quiz from './routes/quiz.svelte'
 	import Try from './routes/try.svelte'
 </script>
 
 <main>
 	<Router>
 		<Route path="/">
+			<Quiz />
+		</Route>
+		<Route path="/game">
 			<Try />
 		</Route>
 	</Router>
@@ -19,6 +23,9 @@
 		height: 100%;
 		display: flex;
 		justify-content: center;
+		justify-self: center;
 		width: 100%;
+		max-width: 768px;
+		/*overflow: hidden;*/
 	}
 </style>

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/Components/Button.svelte

@@ -1,8 +1,12 @@
 <script>
+	import { navigate } from 'svelte-routing'
+
 	export let primary = false
+	export let style = ''
+	export let href = ''
 </script>
 
-<button on:click class:primary>
+<button {style} on:click={() => navigate(href)} on:click class:primary>
 	<slot />
 </button>
 
@@ -24,6 +28,9 @@
 		background-color: rgb(232, 232, 232);
 		color: #4263eb;
 
+		word-break: break-word;
+		overflow: auto;
+
 		&.primary {
 			color: #110042;
 			background-color: rgba(150, 221, 255);

src/lib/Components/MyComponents/Layout.svelte

@@ -0,0 +1,11 @@
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		height: 100%;
+		width: 100%;
+		/*border: 1px solid grey;*/
+	}
+</style>

src/lib/Components/MyComponents/Quiz/Heading.svelte

@@ -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>

src/lib/Components/MyComponents/Quiz/QuizWrap.svelte

@@ -0,0 +1,13 @@
+<script>
+</script>
+
+<section>
+	<slot />
+</section>
+
+<style>
+	section {
+		display: flex;
+		padding: 10px;
+	}
+</style>

src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte

@@ -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>

src/lib/Components/MyComponents/Quiz/answers/Input.svelte

@@ -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>

src/lib/Components/MyComponents/Sharebutton.svelte

@@ -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>

src/lib/Components/MyComponents/game/Tab.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Sharebutton from './Sharebutton.svelte'
+	import Sharebutton from '../Sharebutton.svelte'
 	export let shareData
 </script>
 
@@ -7,7 +7,7 @@
 	<Sharebutton {shareData} />
 </div>
 
-<style>
+<style lang="scss">
 	div {
 		width: 100%;
 		height: calc(100% - 75%);
@@ -18,5 +18,12 @@
 		top: 0;
 		padding: 50px;
 		background: none;
+		position: fixed;
+		clip-path: inset(0);
+		z-index: 6;
+
+		@media (min-width: 768px) {
+			position: absolute;
+		}
 	}
 </style>

src/lib/Components/Overlay.svelte

@@ -1,36 +1,38 @@
 <script>
 	export let img
-	export let shareData
+	export let shareData = null
 	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>
 
-<section class="container">
+<Layout>
+	<section class="container">
 		<img src={img} {alt} />
+		{#if shareData !== null && shareData !== false}
 			<Tab {shareData} />
+		{/if}
 		<section class="overlay">
 			<slot />
 		</section>
-</section>
+	</section>
+</Layout>
 
 <style lang="scss">
 	.container {
 		position: relative;
 		height: 100%;
 		width: 100%;
-		max-width: 768px;
 
 		.overlay {
-			height: 75vh;
+			min-height: 75vh;
+			height: auto;
 			width: 100%;
 			overflow-y: auto;
 			position: absolute;
 			top: 25%;
 			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;
 			flex-direction: column;
 			row-gap: 35px;
@@ -44,6 +46,11 @@
 			height: auto;
 			min-height: 25%;
 			max-height: 100%;
+			position: fixed;
+
+			@media (min-width: 768px) {
+				position: relative;
+			}
 		}
 	}
 </style>

src/lib/Components/Section.svelte

@@ -1,9 +1,10 @@
 <script>
-	export let title
+	export let style = ''
+	export let title = ''
 </script>
 
-<section>
+<section {style}>
-	<h2>{title}</h2>
+	<h2><slot name="title">{title}</slot></h2>
 	<div><slot /></div>
 </section>
 
@@ -22,7 +23,6 @@
 		}
 
 		div {
-			color: rgba(0, 0, 0, 0.4);
 			font-style: normal;
 			font-weight: 400;
 			font-size: 20px;

src/lib/Ota/Sharebutton.svelte

@@ -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>

src/main.js

@@ -1,7 +1,8 @@
+import './app.css'
 import App from './App.svelte'
 
 const app = new App({
-	target: document.getElementById('app')
+	target: document.getElementById('app'),
 })
 
 export default app

src/main.scss

@@ -16,6 +16,8 @@ body {
 #app {
 	width: 100%;
 	height: 100%;
+	justify-content: center;
+	display: flex;
 }
 
 h1,
@@ -28,4 +30,17 @@ p {
 	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")
+

src/routes/game.svelte

@@ -1,20 +1,20 @@
 <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 shareData
 </script>
 
-<Overlay {shareData} img={backgound}>
+<Overlay {shareData} img={background}>
 	<Heading>
 		<slot name="title" />
 		<div class="bubbles" slot="bubbles">

src/routes/quiz.svelte

@@ -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>

src/routes/try.svelte

@@ -9,7 +9,7 @@
 	let background = '/assets/temp/kar1.png'
 </script>
 
-<Overlay {shareData} {assets} backgound={background}>
+<Overlay {shareData} {assets} {background}>
 	<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="stars">4.5</span>

tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./index.html', './src/**/*.{html,svelte,js,ts}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}

vite.config.js

@@ -1,20 +1,26 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import sveltePreprocess from 'svelte-preprocess'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	resolve: {
+		alias: {
+			$lib: path.resolve(__dirname, 'src', 'lib'),
+		},
+	},
 	plugins: [
 		svelte({
 			preprocess: sveltePreprocess({
 				scss: true,
-				postcss: true
+				postcss: true,
-			})
+			}),
-		})
+		}),
 	],
 	build: {
 		rollupOptions: {
-			output: { entryFileNames: "assets/[name].js" }
+			output: { entryFileNames: 'assets/[name].js' },
-		}
+		},
-	}
+	},
 })